一、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>
此时,浏览器中则可以查到相关提交信息,如图