网络知识

前端formData 传值 和 json传值的区别？

Posted Cola🌀

contentType 常见的格式

  • text/plain ：纯文本格式
  • application/json： JSON数据格式
  • application/x-www-form-urlencoded 中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
  • multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格

一. json格式传递

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'  // 需要主动设置，并且将object 用JSON.stringify(data)进行转化
  })
})

二. From URL Encoded – url 编码格式 （qs.stringify 格式）

fetch(url, {
  method: 'POST', // or 'PUT'
  body: qs.stringify(data), // 或者将data转换为formData格式
  headers: new Headers({
    'Content-Type': 'application/x-www-form-urlencoded'  // 不进行header设置的默认格式
  })
})

三 from 非编码格式 – Multipart From （文件流的格式）

multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

formdata和json的区别

看下面的图就明白了。
从前端传来的都是二进制数据

  • 1、content-type是不同的
  • 2、json我们已经序列化好了，而formdata还是需要进行处理，虽然说后端框架已经帮我们处理好了。

formdata:

json:

在formdata中有种特殊的格式：multipart/form-data

这种格式是传递的一条消息，相当于在消息体里面套消息， 给文件上传提供了便利，它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。当上传的字段是文件时，会有Content-Type来表名文件类型；content-disposition，用来说明字段的一些信息；
由于有boundary隔离，所以multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件。
multipart/form-data：既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息；x-www-form-urlencoded：只能上传键值对，并且键值对都是间隔分开的。