VueJS前端下载Zip后上传至其他端点时文件损坏问题排查

问题根源分析 #

你的代码存在几处关键配置错误，导致下载的二进制数据被篡改，最终上传的文件损坏：

• axios的responseType配置位置错误，它属于请求配置的根节点，而非headers的属性；mode: "no-cors"是fetch专属配置，axios不支持，且会导致响应无法正常解析。
• Blob的MIME类型书写错误，应使用application/octet-stream或application/zip，而非octet/stream。
• 上传时手动设置Headers会破坏表单结构，FormData会自动生成带边界符的正确Content-Type，无需手动干预。

修正后的代码 #

axios.get("http://localhost:8080/zipDirDown/download.zip", {
  headers: {
    Authorization: "Basic xxx"
  },
  responseType: 'arraybuffer' // 移至请求配置根节点
}).then(res => {
  // 使用标准二进制流类型创建Blob
  const blob = new Blob([res.data], {type: "application/octet-stream"});

  const formData = new FormData();
  formData.append("file", blob, "newZipFile.zip");
  formData.append("name", "newZipFile Name");

  const requestOptions = {
    method: 'POST',
    headers: {
      Authorization: "Basic xxx"
      // 无需手动设置Content-Type，FormData会自动处理
    },
    body: formData,
    redirect: 'follow'
  };

  fetch("http://localhost:8080/zipEndpointUp", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));
})

关键修改说明 #

• axios请求配置修正：将responseType移到请求配置的根节点，确保axios正确处理二进制响应；删除无效的mode: "no-cors"配置。
• Blob类型修正：使用标准MIME类型application/octet-stream，保证Blob的二进制数据格式正确。
• 上传Headers调整：移除手动设置的Content-Type，让浏览器自动生成符合表单要求的请求头，避免数据解析错误。

若问题仍存在，可对比下载的res.data字节长度与原文件是否一致，确认下载环节未丢失数据。

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