一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

大文件系列拓展-分段下载功能(Vue+Express)

前言

大文件上传实现专栏中,4篇文章带掘友们从0到1,用express+vue实现了大文件上传的主流程:包括了切片上传、断点续传、秒传等热门功能。

今天来实现跟上传相反的功能,那就大文件分段下载功能。

需求分析

大文件分段下载,跟大文件上传时要切片的初心一样,就是为了“快”。如果能够同时下载一个大文件的多个片段,然后组装起来,那将能够充分利用我们的网络资源,加速下载。

后端静态文件服务

# 新建一个后端项目
mkdir server-by-express && cd server-by-express && npm init -y
# 安装需要的依赖
npm i express fs-extra cors nodemon

大文件系列拓展-分段下载功能(Vue+Express)

用vscode打开,新建一个index.js文件,输入如下内容:

const express = require("express");
const fs = require("fs-extra");
const path = require("path");

// 静态资源目录
const PUBLIC_DIR = path.resolve(__dirname, "public");
// 确保静态资源目录存在
fs.ensureDir(PUBLIC_DIR);

const app = express();
// 静态资源服务
app.use(express.static(PUBLIC_DIR));

app.listen(3000, () => {
  console.log("Server running on http://localhost:3000");
});

然后新建一个public目录,在里面放一个index.html

大文件系列拓展-分段下载功能(Vue+Express)

添加一个 scriptstart: "nodemon index.js", 执行 npm run start跑起来:

大文件系列拓展-分段下载功能(Vue+Express)

然后放一个测试的视频文件 video-for-test.mp4,在 index.html 引入展示看看

大文件系列拓展-分段下载功能(Vue+Express)

效果是这样的:

大文件系列拓展-分段下载功能(Vue+Express)

好了,以上都是为了证明静态服务功能没问题。

前端搭建

为了后面分段下载的美观性,我们用vite+vue快速搭建页面。

大文件系列拓展-分段下载功能(Vue+Express)

引入 element-plus

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

const app = createApp(App);

app.use(ElementPlus);
app.mount("#app");

把无关文件删除掉,只留下 App.vue

<script setup>
import { ref } from "vue";
const filename = ref("video-for-test.mp4");
</script>

<template>
  <div class="wrapper">
    <el-input v-model="filename" placeholder="文件名"></el-input>
  </div>
</template>

<style scoped>
.wrapper {
  padding: 20px;
  height: 100vh;
}
</style>

大文件系列拓展-分段下载功能(Vue+Express)

效果如下:
大文件系列拓展-分段下载功能(Vue+Express)

Range 分段下载

先添加一个按钮用来触发下载

大文件系列拓展-分段下载功能(Vue+Express)

大文件系列拓展-分段下载功能(Vue+Express)

http请求头部有个Range字段,可以用于请求部分文件段, 具体介绍和语法,看 MDN

大文件系列拓展-分段下载功能(Vue+Express)

但前提得知道要请求的文件大小是多少,然后才能根据分段大小设置Range拿到文件片段

这个时候,Head请求派上用场了,可以只在header获取文件的大小类型信息。我们用 axios 来发送请求,先安装下 npm i axios, 然后试一下

大文件系列拓展-分段下载功能(Vue+Express)

然而发生跨域了,浏览器阻止我们拿到跨域请求响应的内容

大文件系列拓展-分段下载功能(Vue+Express)

express 里面设置一下允许跨域

cons cors = require('cors')
...
app.use(cors());

再试一下

大文件系列拓展-分段下载功能(Vue+Express)

响应头部包括了 accept-range: bytes 支持分段请求;并且也拿到了文件的类型和大小信息

大文件系列拓展-分段下载功能(Vue+Express)

接下来,实现分段请求逻辑,思路是线性的,直接看注释很清晰

const handleDownload = async () => {
  const res = await axios.head(`http://localhost:3000/${filename.value}`);
  // 获取文件信息
  const chunkSize = 1024 * 1024 * 100; // 100MB
  const totalSize = res.headers["content-length"];
  const mime = res.headers["content-type"];
  const count = Math.ceil(totalSize / chunkSize);

  // 并发分段下载
  const tasks = Array.from({ length: count }, (_, i) => {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, totalSize);
    return axios.get(`http://localhost:3000/${filename.value}`, {
      headers: {
        Range: `bytes=${start}-${end - 1}`,
      },
      responseType: "blob",
    });
  });

  // 合并分段
  const blobs = await Promise.all(tasks);
  const blob = new Blob(
    blobs.map((blob) => blob.data),
    { type: mime }
  );

  // 保存为文件
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = filename.value;
  link.click();
  link.remove();
};

来看看效果:

大文件系列拓展-分段下载功能(Vue+Express)

我们来加个进度显示吧

<div class="progress-wrapper">
  <div
    class="progress-item"
    v-for="(progress, key) in progressInfo"
    :key="key"
  >
    <div class="label">{{ key }}</div>
    <el-progress type="circle" :percentage="progress" />
  </div>
</div>
.progress-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

大文件系列拓展-分段下载功能(Vue+Express)

效果如下:

大文件系列拓展-分段下载功能(Vue+Express)

那么到这里range请求进行分段下载功能实现了。

自定义接口分段下载

上面是通过 http range 头部请求服务器静态文件实现的分段下载,那么问题来了,如果服务器不支持range呢?或者大文件不是放在静态服务里面,通过流获取文件呢?阁下当如何应对?

那就得自己接口实现呀,思路保持一致即可

  • head 获取信息接口
const mime = require("mime-types");
...
app.head("/download/:filename", async (req, res) => {
  // 获取文件名
  const { filename } = req.params;
  const filepath = path.resolve(PUBLIC_DIR, filename);
  // 获取文件信息
  const fileInfo = await fs.stat(filepath);
  res.header("Content-Length", fileInfo.size);
  res.header("Content-Type", mime.lookup(filepath));
  res.end();
})
...

用 postman 测试一下:

大文件系列拓展-分段下载功能(Vue+Express)

  • get 下载接口
app.get("/download/:filename", async (req, res) => {
  // 获取文件名
  const { filename } = req.params;
  const filepath = path.resolve(PUBLIC_DIR, filename);
  // 获取文件信息
  const fileInfo = await fs.stat(filepath);
  // 读取文件的起始位置
  const start = req.query.start ? parseInt(req.query.start) : 0;
  // 读取文件的结束位置
  const end = req.query.end ? parseInt(req.query.end) : fileInfo.size;
  // 创建可读流
  const readStream = fs.createReadStream(filepath, { start, end });
  // 设置响应头
  res.header("Content-Length", end - start + 1);
  // 管道流
  readStream.pipe(res);
});

这里有个细节点:我们得设置响应头的Content-Length,且不能设置少了,不然流的接收会截断,导致文件打不开,另外没有设置,我们的进度也会没有e.total而报错,因为axios下载回调里面的total就是来自Content-Length

用 postman 试了一下,没报错,但看不出来什么。

大文件系列拓展-分段下载功能(Vue+Express)

接一下前端添加一个按钮,来试一下下载效果。

大文件系列拓展-分段下载功能(Vue+Express)

前端页面改一下请求接口,请求参数。

大文件系列拓展-分段下载功能(Vue+Express)

看看效果。

大文件系列拓展-分段下载功能(Vue+Express)

总结

这篇文章,图文并茂,从0到1实现了大文件分段下载功能:包括常见的range分段下载,也通过自定义接口实现了分段下载。代码放到gitee, 视频文件就不放上去了,拉取代码之后自己搞个文件试试效果。

对了,这里同样有个并发问题:参考专栏上一篇文章《大文件上传实现-并发控制功能》

思考

不知道掘友们,有没有注意到一个常见的功能:”暂停下载“,比如网盘文件下载可以暂停,然后可以恢复继续下载。那么这个功能该怎么实现呢?如果是electron开发,可以访问文件系统,那么根据专栏前面的文章,和断点续传是相同道理的。但前端,该怎么实现呢?

我这里提供一个思路:我们通过分段下载,但分段粒度小一点,下载完了存一下相关信息,如果暂停下载,那么取消所有未完成的请求。继续下载,则根据刚刚存的信息,恢复下载。这个方案可能会造成总进度条在恢复下载的时候有一点回退,因为部分未完成的请求被取消但没有存信息,重新开始只能从已经完成的部分开始。也因此,分段粒度越小,所会造成的浪费也越小。

如果掘友们有其他思路,欢迎讨论~

题外话

今天写文章的时候,突然收到明天高铁票候补成功的信息,开心😄,这应该是过节前最后一篇文章了,不卷了。提前祝大家新年快乐,万事如意~

原文链接:https://juejin.cn/post/7332043016163868684 作者:小江大浪

(0)
上一篇 2024年2月6日 下午4:21
下一篇 2024年2月6日 下午4:32

相关推荐

发表评论

登录后才能评论