文件下载如何实现

服务端代码：

  1. const express = require('express');
  2. const path = require('path');
  4. const router = express.Router()
  6. router.get('/:filename', (req, res) => {
  7.   const filePath = path.resolve(__dirname, '../../down', req.params.filename)
  8.   res.download(filePath, req.params.filename)
  9. })
  11. module.exports = router;
  1. const express = require('express');
  2. const app = express();
  3. // 文件下载
  4. app.use('/api/download', require('./api/clientDown'))

服务器的响应头

image.png
postman中显示较为多，而浏览器中的显示很少
image.png

这些画圈都是啥

Accept-Ranges：bytes

服务器开启啦断点续传，客户端可以暂停下载。后面会详讲

Content-Disposition：attachment; filename=”2.jpg”

attachment翻译过来就是附件，这句话就是浏览器以附件的形式下载文件，默认保存的文件名为2.jpg

Content-Length：12361649

这个文件有多少字节，也就是需要下载饿字节数

Content-Type：image/jpeg

文件类型

断点续传

迅雷下载协议

把完整的下砸地址拿到
AA下载地址ZZ
进行base64编码
thunder://base64编码
代码实现

  1.   <body>
  2.     <a resrole="thunder" href="/api/download/2.zip">下载</a>
  3.     <!-- 迅雷下载协议
  4.     把完整的下载地址得到
  5.     AA地址ZZ
  6.     base64编码
  7.     thunder://base64编码
  8.     -->
  9.     <script>
  10.       const a = document.querySelector("a[resrole=thunder]");
  11.       let thunderLink = `AA${a.href}ZZ`;
  12.       thunderLink = btoa(thunderLink); // base-64 编码
  13.       thunderLink = "thunder://" + thunderLink;
  14.       a.href = thunderLink;
  15.     </script>
  16.   </body>

断点续传的请求头

image.png

range:’bytes=8545332-12361648’

这个会告诉服务器我会下载那一部分的字节，当暂停下载客户端会记录这请求头的值，当恢复下载在将这个请求头发送给服务器，这就是断点续传