Axios通过HTTP Put上传文件至类S3存储如何避免额外头部封装

问题1解答 #

你看到的首尾额外内容确实是multipart/form-data类型的MIME边界标识和表单字段头部信息。因为你使用了FormData对象封装文件，浏览器会自动为请求体添加multipart表单的分隔边界、字段描述头，而S3/DO Spaces的预签名PUT接口会直接把整个请求体的内容作为文件存储，所以这些表单结构信息也被当成了文件内容的一部分写入了存储对象。

问题2解决方法 #

不要用FormData封装文件，直接把原始的File对象作为PUT请求的请求体传递即可，同时要保证请求的Content-Type和你生成预签名URL时指定的Content-Type完全一致，否则会出现签名校验失败的问题。

修改后的上传代码参考：

axios.put(url, uploadFile[0], {
  headers: {
    // 此处Content-Type必须和生成预签名URL时使用的类型完全匹配
    'Content-Type': uploadFile[0].type
  }
}).then((response) => {
  axios.post(`/files/${file_id}/uploaded_to_cloud`).then((response) => {

  }).catch((error) => {

  })
}).catch((error) => {
  // error response
});

内容的提问来源于stack exchange，提问作者mj_