文件上传导致 PDF 文件以外的问题

Question

const uploadData = new FormData();
      uploadData.append("engfile",fileObj.originFile);
const [response,error] = yield call(() => fetch(`http://localhost:44361/api/v1/files?fileName=${payload.name}&fileSize=${payload.size}`, {
        method: 'POST',
        body: uploadData,
        headers:{
             'Content-Type':'multipart/form-data;',
             'token':'token'
        }
      })
       .then((response) => response.json())
      .then((result) => {
        console.log('Success:', result);
        // yield put({type:"UPLOAD_SUCCESS",data:response.data})
        return result;
      })
      .catch((error) => {
        return error;
      }));

我正在尝试将文件从 UI 上传到服务器，但上面的代码非常适合 PDF 文件，但如果我在浏览器中发送 .docx 或图像文件，因为 .docX 和 .xlsx 文件是可写的，文件会得到均匀的边界值与内容类型。如何使用 fetch API 避免这种情况？

上面的代码非常适合pdf文件，因为它不可写，但对于其他文件则不能，如何在UI级别解决这个问题，或者我们是否必须在API级别（API端的nodejs）处理，可以请你在这里指导我？

在 PDF 浏览器请求中：

Answer 1

我认为您不应该覆盖 Content-Type 标头，因为内部浏览器设置了 boundary

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryUpNj05W8fQrQrefK

示例：当您运行此程序并查看网络面板时，提到的标题已设置

const formData = new FormData();

const testFile = new Blob([], {
  type: 'text/plain'
})

formData.append("testFile", testFile)

console.log([...formData.entries()])

fetch("/test", {
  method: 'POST',
  body: formData
}).catch(error => {

});