上传文件时，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);

但是请求标头显示：

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

Answer 1

由于您的formData是其中包含文件的FormData实例，因此axios将Content-Type标头设置为用于上传表单的正确值不足为奇。

无需更改要上传的表单数据的Content-Type 。 文件的MIME类型是表单中数据的一部分 。 仅当您将文件数据本身包括在PUT中而不是包含文件数据的表单中时，才需要更改它。

---

您在评论中说：

我的服务器需要知道文件的正确MIME类型，并且浏览器发送的所有内容都是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)
});

这可能需要调整，但这是总的想法。