系统开发：大文件下载报错问题

问题描述：在个人开发文件上传管理系统时，遇到小文件可以直接下载，遇到大文件只能在刚登陆成功时下载一次，再次下载别的大文件就会报错，具体错误信息是这样：

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…},

解决方式：

前端接收的文件类型：blob类型改为arraybuffer （我的后端返回是MIME类型）

前端代码：

export const downloadFile = (filename) => {
  return api.get(`/files/download/${filename}`, {
    responseType: 'arraybuffer'  // 设置响应类型为 blob，以便处理文件下载
  })
}

    async downloadFile(fileName) {
      try {
        const response = await downloadFile(fileName); // 调用后端下载接口
    
        // 检查响应状态和数据类型
        if (response.status !== 200 || response.data.constructor.name !== 'ArrayBuffer') {
          throw new Error('无法下载文件');
        }
    
        // 将 ArrayBuffer 转换为 Blob
        const blob = new Blob([response.data]);
    
        // 创建一个 URL 用于下载
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = fileName; // 设置下载文件名
    
        // 将 <a> 标签添加到 DOM 中并模拟点击
        document.body.appendChild(link);
        link.click();
    
        // 下载完成后移除 <a> 标签
        link.remove();
    
        // 清理创建的对象 URL
        window.URL.revokeObjectURL(url);
    
      } catch (error) {
        console.error('下载文件时出错:', error);
        throw new Error('下载文件失败，请重试');
      }
    }
  }   

可能原因：

• responseType: 'arraybuffer' 使浏览器能够接收二进制数据（大文件的原始内容），避免了在处理大文件时由于内存限制导致的 Blob 错误。
• 将 ArrayBuffer 转换为 Blob 后，浏览器能够识别该数据并正常处理下载操作。