前端如何优雅下载100G大文件?Node.js流式传输实战

💡 前端如何优雅下载100G大文件?Node.js流式传输实战

今天给大家分享一个前端下载超大文件的解决方案!工作中遇到需要下载100G大文件的场景,传统下载方式直接崩溃?来看看这个流式传输方案👇

🌟 核心思路

  1. 点击按钮先获取下载令牌(token)
  2. 通过a标签携带token访问下载接口
  3. 服务端使用流式传输(Stream)返回文件
  4. 前端边接收边保存,内存占用极低

🛠️ 前端实现

javascript 复制代码
// 下载按钮点击事件
document.getElementById('downloadBtn').addEventListener('click', async () => {
  try {
    // 1. 获取下载token
    const res = await fetch('/api/getDownloadToken', {
      method: 'POST',
      body: JSON.stringify({ filename: 'huge-file.zip' })
    });
    const { token } = await res.json();
    
    // 2. 创建隐藏的a标签触发下载
    const a = document.createElement('a');
    a.href = `/api/download?token=${token}`;
    a.download = 'huge-file.zip';
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    
    console.log('下载已开始,请稍候...');
  } catch (err) {
    console.error('下载失败:', err);
  }
});

🔧 Node.js服务端代码

javascript 复制代码
const express = require('express');
const fs = require('fs');
const crypto = require('crypto');
const app = express();

// 临时存储token和文件路径的映射
const tokenMap = new Map();

app.use(express.json());

// 生成下载token
app.post('/api/getDownloadToken', (req, res) => {
  const { filename } = req.body;
  const filePath = `/data/${filename}`; // 大文件实际路径
  
  if (!fs.existsSync(filePath)) {
    return res.status(404).json({ error: '文件不存在' });
  }
  
  // 生成唯一token
  const token = crypto.randomBytes(16).toString('hex');
  tokenMap.set(token, filePath);
  
  // token有效期10分钟
  setTimeout(() => tokenMap.delete(token), 600000);
  
  res.json({ token });
});

// 流式下载文件
app.get('/api/download', (req, res) => {
  const { token } = req.query;
  const filePath = tokenMap.get(token);
  
  if (!filePath) {
    return res.status(403).send('无效或过期的token');
  }
  
  // 获取文件信息
  const stat = fs.statSync(filePath);
  const fileSize = stat.size;
  const fileName = path.basename(filePath);
  
  // 设置响应头
  res.setHeader('Content-Disposition', `attachment; filename=${fileName}`);
  res.setHeader('Content-Type', 'application/octet-stream');
  res.setHeader('Content-Length', fileSize);
  
  // 创建可读流并管道传输到响应
  const fileStream = fs.createReadStream(filePath);
  fileStream.pipe(res);
  
  // 清理token
  tokenMap.delete(token);
});

app.listen(3000, () => console.log('服务器运行中...'));

✨ 方案优势

  1. 内存友好:流式传输不占用大内存
  2. 断点续传:可通过Range头实现(进阶功能)
  3. 安全可控:token机制防止未授权下载
  4. 进度显示:前端可通过xhr监听进度(代码略)

💡 进阶优化

  • 添加下载进度条
  • 实现断点续传功能
  • 文件校验(MD5/SHA256)
  • 下载限速控制

这个方案完美解决了我们公司处理超大文件下载的痛点!大家有什么问题欢迎评论区交流~ #前端开发 #Nodejs #文件下载 #编程技巧 #web开发

相关推荐
求知若渴,虚心若愚。2 小时前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
LinDaiuuj3 小时前
最新的前端技术和趋势(2025)
前端
一只小风华~3 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟4 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
若梦plus5 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉5 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A5 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6665 小时前
React与Rudex的合奏
前端·react.js·前端框架
若梦plus6 小时前
React之react-dom中的dom-server与dom-client
前端·react.js
若梦plus6 小时前
react-router-dom中的几种路由详解
前端·react.js