Live2d Test Env

WebKitFormBoundary的解决办法

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等等等等讨厌的问题

以上。

posted @ 2021-08-23 18:34  致爱丽丝  阅读(4916)  评论(0编辑  收藏  举报