42.HTTP Header之Content-Type

最近在看一个管理系统的框架，后端使用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表单之外的方式发送时，请求主体可以时任何类型。