前端接受zip文件流并下载

前端接收ZIP文件流并下载通常涉及到HTML5的File API和服务器提供的文件流。以下是步骤概述：

1. **HTML部分**：
使用`<input type="file">`元素让用户选择ZIP文件，然后监听`change`事件处理函数，获取用户选择的文件。

<input id="upload-zip" type="file" accept=".zip" (change)="handleZipSelect($event)">
<button (click)="downloadZip()">下载</button>

2. **JavaScript部分**：
使用JavaScript的FileReader API读取文件内容，然后转换成Blob对象（浏览器原生支持的数据块），接着创建一个新的a标签用于触发下载。

handleZipSelect(event) {
  const file = event.target.files[0];
  if (!file || !file.type.startsWith('application/zip')) return;

  const reader = new FileReader();
  reader.onloadend = () => {
    const zipBlob = reader.result;
    this.downloadZip(zipBlob);
  };
  reader.readAsArrayBuffer(file);
}

downloadZip(zipBlob) {
  const url = URL.createObjectURL(zipBlob);
  const aLink = document.createElement('a');
  aLink.href = url;
  aLink.download = 'archive.zip'; // 下载名称
  aLink.click();
  setTimeout(() => {
    URL.revokeObjectURL(url); // 下载完成后释放URL
  }, 0);
}

3. **服务器端**：
如果文件非常大，你可能需要在服务器上处理并将文件作为HTTP响应的一部分提供。可以考虑使用流式API或Content-Disposition头来指示它是一个文件流。

const express = require('express');
const multer = require('multer');

const app = express();

app.use(multer({ dest: 'uploads/' }).single('zipFile'));

app.get('/download', (req, res) => {
  const filePath = req.file.path; // 获取存储路径
  res.download(filePath, 'archive.zip'); // 设置下载名称
});

app.listen(3000, () => console.log('Server running on port 3000'));