Cool Admin Vue 项目中前后端文件流下载的实现与问题解决

前端文件下载的常见问题分析

在基于 Cool Admin Vue 框架开发的后台管理系统中，实现文件下载功能是常见的业务需求。开发者在实际项目中可能会遇到下载文件无法正常打开的问题，这通常与前后端数据交互方式有关。

后端实现要点

在后端实现文件下载时，需要注意以下几个关键点：

1. 文件路径处理：必须确保文件路径的安全性，避免直接使用用户输入拼接路径，防止目录遍历攻击。

2. 文件存在性检查：在返回文件流前，应该先检查文件是否存在，避免因文件不存在导致异常。

3. 响应头设置：正确的响应头设置对浏览器处理文件下载至关重要，特别是 Content-Type 和 Content-Disposition 头。

4. 流式传输：对于大文件，应该使用流式传输而非一次性读取整个文件到内存中，这样可以降低服务器内存压力。

前端接收处理方案

前端接收文件流时，常见的错误包括：

1. 响应数据处理不当：直接使用响应数据创建 Blob 对象，而没有正确处理二进制流。

2. 文件类型设置错误：Blob 对象的 MIME 类型设置不正确，导致浏览器无法识别文件类型。

3. 文件名获取方式：从 URL 解析文件名时，没有考虑各种可能的路径格式。

正确的实现方式

后端代码优化

后端应该直接返回文件流，不需要手动创建 Blob 对象。Egg.js 框架会自动处理流式响应：

@Get('/download')
async download(@Query('filename') filename: string) {
  const fileDir = path.resolve(this.ctx.app.baseDir, '../public/uploads/');
  const filePath = path.join(fileDir, filename);
  
  if (!fs.existsSync(filePath)) {
    throw new Error('文件不存在');
  }
  
  this.ctx.attachment(filename);
  this.ctx.body = fs.createReadStream(filePath);
}

前端代码优化

前端应该正确处理响应类型，并确保使用正确的 Blob 类型：

service.request({
  method: 'get',
  url: '/download',
  params: { filename: obj.scope.row.path },
  responseType: 'blob'
}).then(res => {
  const blob = new Blob([res.data], { type: res.headers['content-type'] });
  const fileName = obj.scope.row.path.split('/').pop();
  FileSaver.saveAs(blob, fileName);
}).catch(error => {
  console.error("文件下载失败:", error);
});

常见问题排查

1. 文件无法打开：检查后端返回的 Content-Type 是否正确，前端是否正确设置了 responseType 为 'blob'。

2. 文件名乱码：确保响应头中设置了正确的 Content-Disposition，包含 filename 和 filename* 参数。

3. 大文件下载失败：检查服务器是否有超时设置，前端是否有请求超时设置。

性能优化建议

1. 对于大文件下载，可以考虑实现分片下载和断点续传功能。

2. 前端可以添加下载进度显示，提升用户体验。

3. 后端可以对频繁下载的文件添加缓存机制，减少磁盘 I/O 压力。

通过以上方案，可以解决 Cool Admin Vue 项目中文件下载功能的各种问题，实现稳定可靠的文件下载体验。