上传文件时，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中包含 file 数据本身而不是包含文件数据的表单时，才需要更改它。

---

在评论中您说：

  

我的服务器需要知道文件的正确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)
});

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