API 下载 ZIP 文件损坏难题，DRF 和 Axios 的解决之道

vue.js

2024-03-07 01:49:52

解决 API 下载 ZIP 文件损坏的难题：DRF 与 Axios 的协奏曲

问题根源

当我们使用 Django REST Framework（DRF）构建 API 来下载 ZIP 文件，并通过 VueJS 中的 Axios 来接收时，却发现下载的文件损坏，无法在 Windows 中打开。这让我们十分头疼。

全面解决方案

经过仔细调查，我们发现了解决此问题的关键在于多管齐下的方法。

1. 检查文件大小

确保下载的文件大小与原始 ZIP 文件的大小相符。如果大小不一致，表明传输过程中可能存在数据丢失。

2. 验证内容类型

发送的响应中必须设置正确的 Content-Type 标头，将其设置为 application/zip。

3. 优化文件指针

优化 Python 代码中打开文件指针的方式。避免直接使用 open(file, "rb").read()，考虑使用 with 块或 BytesIO 来提高效率。

4. 检查 API 端点权限

确认用于下载 ZIP 文件的 API 端点具有所需的权限。确保用户有权访问和下载该文件。

5. 调整 Axios 配置

在 Axios 配置中，将 responseType 设置为 arraybuffer，而不是 blob。这有助于防止数据损坏。

6. 禁用 Axios 解压缩

Axios 默认会尝试解压缩响应数据。禁用此行为以确保 ZIP 文件保持原样。

7. 检查网络连接

稳定的网络连接对于数据传输至关重要。确保客户端和服务器之间的网络连接稳定，避免因中断导致数据丢失。

示例代码

Python (DRF)

from django.http import HttpResponse

def download_group(self, request, pk=None):
    resource = self.get_object()
    file, filename = resource.downloadZip()
    with open(file, "rb") as f:
        FilePointer = f.read()
    response = HttpResponse(FilePointer, content_type='application/zip')
    response['Content-Disposition'] = f'attachment; filename={filename}'
    response['Content-Length'] = os.path.getsize(file)
    return response

VueJS (Axios)

axios
  .post(
      API_url,
      {
          responseType: 'arraybuffer',
      }
  )
  .then((res) => {
      const url = window.URL.createObjectURL(new Blob([res.data]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", filename);
      document.body.appendChild(link);
      link.click();
  })