put方式更适用于传输二进制数据流。
需要将二进制文件流使用put方式发送给后台,起初使用formData方式,但是formData方式会导致上传后的文件附带一些不期望的数据:
------WebKitFormBoundaryr8nE5YswiCilf8qB
Content-Disposition: form-data; name="file"; filename="blob"
Content-Type: application/octet-stream
hello world
------WebKitFormBoundaryr8nE5YswiCilf8qB--
上面这个例子里, txt文件里的内容是hello,world
,但在上传后却生成了开头一堆,末尾一堆,并且并不是仅txt文件存在这种问题,亲测图片格式上传后再下载也会如此,
今天笔者查找了好多资料,但是并没有解决问题,万般无奈只好一点点摸索,现在讲下思路:
笔者的思路起初很简单,使用formData方式,然后使用formData.append()将二进制文件流放入这个formData对象中,然后在axios请求中的data中将formData填充进去:
let formData = new FormData();
formData.append("file", blobs); //二进制文件流
axios({
method: "put",
url: uploadUrl,
data: formData,
headers: {
"Content-Type": "multipart/form-data", // 关键
},
})
但是这样写就会导致出现上述情况--上传后无法下载,然后笔者做了一些改进:
//大概思路:放弃formData方式传输二进制文件流
axios({
method: "put",
url: uploadUrl,
data: blobs , // 重点1,直接将原始二进制流赋给data
headers: {
"Content-Type": "application/octet-stream", // 重点2
},
responseType: "blob", //重点3
})
本质是弃用formData传输文件流,而是使用二进制特有文件流格式(content-type),这样即可解决签名文件内WebKitFormBoundaryr8nE5YswiCilf8qB等等等等讨厌的问题
以上。