使用Fetch API向Dropbox上传.xlsx文件出现损坏该如何解决

PDF与XLSX文件本身在Fetch POST上传逻辑上没有本质区别，出现异常的核心原因是两类文件的二进制容错性不同：

• XLSX本质是ZIP压缩格式的二进制文件，对数据完整性要求极高，任意一个字节的丢失、篡改都会导致文件无法正常打开
• PDF格式自带一定的容错机制，部分非核心区域的二进制数据异常也可能被阅读器正常解析，所以你没有发现损坏问题

你修改Content-Type触发400错误的原因是：Dropbox filesGetTemporaryUploadLink 接口返回的上传地址，明确要求请求头Content-Type必须固定为application/octet-stream，不支持自定义为其他MIME类型，请勿修改该参数。

XLSX文件上传后损坏的核心原因是你传入的fileData二进制结构被破坏，按以下步骤排查修复即可：

• 确认fileData的类型必须是File、Blob或ArrayBuffer三类二进制对象，禁止传入base64字符串、普通文本字符串等非二进制格式数据
• 如果你通过FileReader读取文件内容，必须使用readAsArrayBuffer方法读取，禁止使用readAsText、readAsDataURL等会修改二进制结构的读取方法，正确示例如下：

const reader = new FileReader();
reader.onload = async (e) => {
  const fileData = e.target.result;
  const fileUploadResult = await fetch(uploadDestination.url, {
      body: fileData,
      cache: "no-cache",
      credentials: "same-origin",
      headers: {
          "Content-Type": "application/octet-stream"
      },
      method: "POST",
      mode: "cors"
  });
}
// 此处必须用readAsArrayBuffer
reader.readAsArrayBuffer(yourSourceFile);

• 检查是否对fileData做过额外转码操作，比如调用toString()、encodeURIComponent()等方法，这类操作都会破坏二进制文件的完整结构，必须删除相关转码逻辑。

内容的提问来源于stack exchange，提问作者Mike