最近在看一个管理系统的框架，后端使用node+express+mangodb实现的，但是想在原有文件上传的基础上加一个大文件上传的功能。奈何用了这么多年的数据格式对此还是有些疑惑，导致文件上传传值时不知道该怎么传，今天来总结一些常用的数据传输格式。
- Content-Type:multipart/form-data; boundary=something
form表单提交，并且有文件上传时
image-20220125144220379.png
例子：
<input type="file" onChange={this.handleChange} />
handleChange = (e) => {
this.file = e.target.files[0];
let file = e.target.files[0];
let formData = new FormData();
formData.append("image",file);
this.request({
url: "http://localhost:3001/manage/img/upload",
//data里面不需要进行再次包裹一层
data: formData,
});
};
- Content-Type: application/x-www-form-urlencoded
使用form表单提交，默认会加一个encType="",form表单数据会以key/value的形式发送到服务器。
image-20220125143757534.png
例子：
<form action={"http://localhost:3000/login"} method="post">
<input
value={username}
name="username"
placeholder="请输入用户名"
></input>
<input
value={password}
name="password"
placeholder="请输入密码"
type="password"
></input>
<button type="submit">登录</button>
</form>
- Content-Type: application/json
使用json格式上传，Payload里面展示为Request Payload,内容为json格式
image-20220125145311059.png
例子：
mergeRquest = () => {
this.request({
url: "http://localhost:3001/manage/img/merge",
//需要在data中自定义内容类型，前端传过去的JSON字符串格式，后端需要使用JSON.parse转成对象格式
data: JSON.stringify({
filename: this.file.name,
size: SIZE,
}),
headers: {
"content-type": "application/json",
},
});
};
相应的Response Header中也有一个Content-Type,此时表示的时服务器端返回的数据格式，用于定义网络文件和网页的编码，让浏览器决定以什么格式解析返回的内容。
一些常见的response header content-type：
| 响应头 | 类型 | 备注 |
|---|---|---|
| content-type | text/html | 返回的是html内容，同时设置编码格式为utf-8 |
| text/javascript | 返回的是javascript文件 | |
| text/plain; | 返回纯文本格式 | |
| application/json;charset=UTF-8 | 返回Json格式，项目开发中常用的一种格式 | |
| image/png | 返回图片格式 |
2022.3.22更新
post请求通常是通过html表单发送，并返回服务器的修改结果。
content type是通过在form元素中设置正确的enctype属性，或是在input和button元素中设置formenctype属性来选择的。
默认使用application/x-www-form-urlencoded，application/x-www-form-urlencoded数据被编码成以&分割的键=值对，同时以=分隔键和值，非字母或数字的字符会被百分比编码。
因此不支持二进制数据，应使用multipart/form-data。
当post请求是通过除HTML表单之外的方式发送时，请求主体可以时任何类型。
