上傳文件時，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)
});

這可能需要調整，但這是總的想法。