Content-Type: multipart/form-data；上传文件

一、postman 模拟Content-Type: multipart/form-data请求头携带Content-Type: multipart/form-data;可以用来上传文件。当然，你也可以不上传文件，上传普通键值对。如下图，使用Postman模拟提交数据。

文章共710字 · 阅读需要大约3分钟

一键AI生成摘要，助你高效阅读

问答

weixin_49115633

1754人浏览 · 2024-01-13 21:44:03

weixin_49115633 · 2024-01-13 21:44:03 发布

一、postman 模拟Content-Type: multipart/form-data

请求头携带Content-Type: multipart/form-data;可以用来上传文件。当然，你也可以不上传文件，上传普通键值对。如下图，使用Postman 模拟提交数据。

如果使用 Content-Type: multipart/form-data; 需要是post请求；
这里向www.baidu.com 提交数据，当然百度不会处理我们提交的数据，但是他不处理，不影响我们发送。我们这里只是为了看我们请求的数据长什么样子，站在前端的角度看问题。
此处的form-data 就是multipart/form-data; 的意思。但是在postman中需要选择body。
name ，age 就是传输的普通字符串，img此处先选择file 类型，然后在添加文件。（此处我选择了图片）
选择code 也就是</> 图标
此处选择Http，才能看到下面的请求头信息。

Content-Type: multipart/form-data; 指明了我们的请求类型
boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW 制定了不同部分的分隔符
每一部分数据都会包含一个"Content-Disposition"头部来描述这个数据的一些相关信息。

二、使用普通form表单信息提交

    <form action="/upload" method="POST" enctype="multipart/form-data">

        <input type="text" name="name">
        <br><br>
        <input type="text" name="age">
        <br><br>
        <input type="file" name="img">
        <br><br>
        <button>登录</button>
      </p>
    </form>

使用普通表单提交，需要将enctype设置为"mutipart/form-data",此时在浏览器的请求头中只能看到如下信息：

在payload中可以看到如下信息：

总之，看到的信息非常有限。当然了，我们也不推荐这种使用表单提交的方式。

三、使用ajax方式提交信息

使用fetch

  <body>
      <input type="file" name="img"  />
       <br><br>
      <button>提交</button>
    <script>
      function upload() {
        const inputFileDom = document.querySelector("[name=img]");
        const formData = new FormData(); 
        const file=inputFileDom.files[0]
        formData.append("img", file);
        fetch("/upload", {
          body: formData,
          method: "POST",
        })
          .then((resp) => resp.json())
          .then((resp) => {
            console.log(resp);
          });
      }
      document.querySelector("button").onclick = upload;
    </script>
  </body>

此时，浏览器中则可以查到相关提交信息，如图