axios 不允许我在上传文件时设置 Content-Type

Question

我在做：

          return axios.request({
            headers: {
              "Content-Type": uploadFile.type // This is set to application/flac
            },
            method: "PUT",
            data: formData,
            url: respAudio.signedUploadUrl,
            timeout: 0,
            onUploadProgress: progressEvent => {
              this.uploadProgress =
                (progressEvent.loaded / progressEvent.total) * 100 - 10;
            }
          });

对于formData：

      let formData = new FormData();
      const uploadFile = document.querySelector("#fileUploadInput").files[0];

      formData.append("file", uploadFile);

但是请求 Headers 显示：

如何让 axios 尊重我设置的 Content-Type？

Answer 1

由于您的 formData 是一个包含文件的 FormData 实例，因此 axios 设置 Content-Type header 并不让我感到惊讶上传表单的正确值。

无需更改正在上传的表单数据的 Content-Type。文件的 MIME 类型是表单中数据的部分。如果您在 PUT 中包含文件数据本身，而不是包含文件数据的表单，您只会更改它。

您在评论中说：

My server needs to know the correct MIME type of the file and all the browser is sending is multipart/form-data

浏览器正确。您发送的是表格，而不是文件。如果要发送文件，请不要使用 FormData；将文件数据读入 ArrayBuffer 并发送。沿着这些线的东西：

return new Promise((resolve, reject) => {
  const uploadFile = document.querySelector("#fileUploadInput").files[0];
  let reader = new FileReader();
  reader.onload = () => {
    resolve(
      axios.request({
        headers: {
          "Content-Type": uploadFile.type // This is set to application/flac
        },
        method: "PUT",
        data: reader.result,
        url: respAudio.signedUploadUrl,
        timeout: 0,
        onUploadProgress: progressEvent => {
          this.uploadProgress =
            (progressEvent.loaded / progressEvent.total) * 100 - 10;
        }
      })
    );
  };
  reader.onerror = () => {
    reject(/*...*/);
  };
  reader.readAsArrayBuffer(uploadFile)
});

这可能需要调整，但这是总体思路。

axios 不允许我在上传文件时设置 Content-Type

axios won't let me set a Content-Type when uploading a file

javascript

axios

content-type