vue3+nodejs实现大文件切片上传-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1013 天，文章内容可能已经过时。

前言
思路
前端界面
文件分片
计算md5值
判断文件是否已经上传
上传切片
合并切片文件
优化
- 逐片上传
- 多个切片并发上传

前言

一般文件上传的方式都是使用FormData，把文件append进去后传给后端。使用这个方式如果文件小不会有什么问题，但是如果是大文件，就很容易出现上传超时的问题，一旦超时了，就需要重新开始，且在上传的过程中，还不能刷新浏览器，用户体验会很差。因为大文件上传一般不会使用只使用FormData来上传，这里记录一下通过文件切片来上传大文件的方法。

思路

文件本地上传之后，先把文件根据需要分成数个切片
计算出文件的 md5 值，每个文件的 md5 都是固定且唯一的
计算出md5值后，发送给后端，后端根据这个md5来判断当前文件是否已经上传，如果已经上传完成，则不需要再上传，如果上传了一半，则把已经上传的文件切片名称返回（用于断点续传），如果没有上传过，则返回一个空数组
如果没有上传过文件，则开始上传没有上传过的文件切片
切片都上传完场之后，合并切片文件

前端界面

前端使用的 vue3 + Element-plus（这里就不贴css代码了）

<template>
  <div class="upload_wrap">
    <div class="upload_btn">
      <el-upload
        ref="file"
        :http-request="handleFileUpload"
        action="#"
        :show-file-list="false"
      >
        <el-button type="primary">上传文件</el-button>
      </el-upload>
    </div>
    <div class="upload_progress">
      <span>上传进度：</span>
      <el-progress
        class="upload_progress_box"
        :stroke-width="20"
        :text-inside="true"
        :percentage="uploaedProgress"
        :format="onProgressText"
      ></el-progress>
    </div>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

大文件上传

文件分片

文件上传之后，先进行文件分片，这里把每个切片设置为 1M ，之后通过 slice 将整个文件分成数个切片

const CHUNK_SIZE = 1024 * 1024; //每个切片为1M

/**
 * 文件切片
 */
const createFileChunk = (size = CHUNK_SIZE) => {
	const chunks = []; // 放置切片数组
	let cur = 0; // 当前的切片索引
	const maxLen = Math.ceil(uploadFile.value.size / size); // 切片的长度
	while (cur < maxLen) {
		const start = cur * CHUNK_SIZE; // 截取切片的起始点
		const end =
					start + CHUNK_SIZE >= uploadFile.value.size
		? uploadFile.value.size
		: start + CHUNK_SIZE; // 截取切片的结束点
		chunks.push({ index: cur, file: uploadFile.value.slice(start, end) }); // 存储截取的切片信息
		cur++;
	}
	return chunks;
};

/**
 * 文件上传
 */
const upload = async () => {
	const nowChunks = createFileChunk(); // 文件分片
};

/**
 * 本地选择文件上传
 */
const handleFileUpload = ({ file }) => {
	if (!file) {
		return;
	}
	uploadFile.value = file; // 保存上传的文件
	upload();
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

计算md5值

这里使用 spark-md5 这个库，可以计算出文件唯一的 md5 值

一般的文件可以直接使用 sparkMD5.hashBinary() 将整个文件的二进制码传入，直接返回文件的md5值
大文件采用分片的方式，spark-md5 还提供了 sparkMD5.ArrayBuffer() 方法，可以进行增量计算，计算出文件的md5值

import sparkMD5 from "spark-md5";

/**
 * 计算md5值
 */
const calculateFileMd5 = (chunks) => {
	const spark = new sparkMD5.ArrayBuffer();
	let count = 0; // 当前计算的分片
	const len = chunks.length; // 分片总长度
	let fileMd5; // 文件的md5值
	return new Promise((resolve) => {
		const loadNext = (index) => {
			const reader = new FileReader();
			// 读取文件分片
			reader.readAsArrayBuffer(chunks[index].file);
			reader.onload = (e) => {
				count++;
				// 读取成功后利用spark做增量计算
				spark.append(e.target.result);
				// 计算当前进度
				if (count == len) {
					fileMd5Progress.value = 100;
					//返回整个文件的fileMd5
					fileMd5 = spark.end();
					resolve(fileMd5);
				} else {
					//更新fileMd5计算进度
					fileMd5Progress.value += 100 / len;
					loadNext(index + 1);
				}
			};
		};
		loadNext(0);
	});
};

/**
 * 文件上传
 */
const upload = async () => {
	const nowChunks = createFileChunk(); // 文件分片
	const nowHash = await calculateHash1(nowChunks); // md5计算
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

判断文件是否已经上传

上传切片之前先判断当前上传的文件是否已经上传过了，如果已经上传过了，则直接提示用户文件上传完成，不需要重新上传，这就是秒传

前端：

/**
 * 文件上传
 */
const upload = async () => {
	const nowChunks = createFileChunk(); // 文件分片
	const nowFileMd5 = await calculateFileMd5(nowChunks); // md5计算
	fileMd5.value = nowFileMd5; // 保存md5值
	// 查询文件是否已经上传过
	checkFileUpload({
		fileMd5: nowFileMd5,
		ext: uploadFile.value.name.split(".").pop(),
	}).then((res) => {
		if (res.status === "ok") {
			// 接口会返回两个值
			// uploaded:Boolean 表示整个文件是否上传过
			// uploadedList:Array 存储已经上传过的切片
			const { uploaded, uploadedList } = res.data;
			// uploaded为true说明文件已经上传过了
			if (uploaded) {
				ElMessage.success("文件上传完成");
				return;
			}
		} else {
			ElMessage.error(res.msg);
		}
	});
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

后端：

const express = require("express");
const path = require("path");
const router = express.Router();
const path = require("path");
const fse = require("fs-extra");

/**
 * 将文件夹中的所有非隐藏文件读取并返回
 */
async function getUploadedList(dirPath) {
	return fse.existsSync(dirPath)
		? (await fse.readdir(dirPath)).filter((name) => name[0] !== ".")
	: [];
}

/**
 * 判断文件是否已上传
 */
router.post("/checkFileUpload", async (req, res) => {
	const { ext, fileMd5 } = req.body;
	// 存放已经合成切片后的完整文件的路径 文件名 fileMd5.ext
	const filePath = path.resolve(
		__dirname,
		"../public",
		`${fileMd5}.${ext}`
	);
	let uploaded = false; // 是否已经上传
	let uploadedList = []; // 存储已经上传的文件切片
	// 判断文件是否已上传
	if (fse.existsSync(filePath)) {
		uploaded = true;
	} else {
		//所有已经上传过的切片被存放在 一个文件夹，名字就是该文件的fileMd5值
		uploadedList = await getUploadedList(
			path.resolve(__dirname, "../public", fileMd5)
		);
	}
	res.send({
		status: "ok",
		msg: "查询成功！",
		data: { uploaded, uploadedList },
	});
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

上传切片

如果文件没有上传过，则开始上传还没有上传过的切片，后端会返回一个 uploadedList 数组，这个数组记录了已经上传过的切片，我们只需要把没有上传过的切片上传就可以，这就是断点续传

前端：

/**
 * 上传切片
 */
const uploadChunks = (uploadedList) => {
	// 每上传一个切片都发送一个请求
	const requests = chunks.value
	.filter((chunk) => !uploadedList.includes(chunk.name)) // 先过滤还没有上传的切片
	.map((chunk) => {
		// 使用FormData来上传文件 因为保存的时候文件夹名为md5值，文件名为之前设置的md5 + '-' + index，所以需要将fileMd5和name一起上传
		const form = new FormData();
		form.append("file", chunk.chunk);
		form.append("fileMd5", chunk.fileMd5);
		form.append("name", chunk.name);
		// 因为切片上传不一定是连续的，所以index需要取chunk对象中的index
		return { form, index: chunk.index };
	})
	.map(({ form, index }) => {
		return uploadSliceFile(form, {
			onUploadProgress: (progress) => {
				chunks.value[index].progress = Number(
					((progress.loaded / progress.total) * 100).toFixed(2)
				); // 当前切片上传的进度
			},
		});
	}); // 最后把数组修改成一个个请求通过Promise.all发送

	Promise.all(requests).then((res) => {});
};

/**
 * 文件上传
 */
const upload = async () => {
	const nowChunks = createFileChunk(); // 文件分片
	const nowFileMd5 = await calculateFileMd5(nowChunks); // md5计算
	fileMd5.value = nowFileMd5; // 保存md5值
	// 查询是否上传
	checkFileUpload({
		fileMd5: nowFileMd5,
		ext: uploadFile.value.name.split(".").pop(),
	}).then((res) => {
		if (res.status === "ok") {
			// 接口会返回两个值
			// uploaded:Boolean 表示整个文件是否上传过
			// uploadedList:Array 存储已经上传过的切片
			const { uploaded, uploadedList } = res.data;
			// uploaded为true说明文件已经上传过了
			if (uploaded) {
				ElMessage.success("文件上传完成");
				return;
			}
			// 如果没有上传过 则开始上传切片
			chunks.value = nowChunks.map((chunkItem, index) => {
				const name = nowFileMd5 + "-" + index; // 每个切片名字都是 md5 + '-' + index
				const isChunkUploaded = uploadedList.includes(name) ? true : false; // 当前切片是否已经上传
				return {
					fileMd5,
					name,
					index,
					chunk: chunkItem.file,
					progress: isChunkUploaded ? 100 : 0, //当前切片上传进度，如果有上传即为100 否则为0，这是用来之后计算总体上传进度
				};
			});
			//上传切片
			uploadChunks(uploadedList);
		} else {
			ElMessage.error(res.msg);
		}
	});
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

后端：

const express = require("express");
const path = require("path");
const router = express.Router();
const multer = require("multer");
const fse = require("fs-extra");
const uuid = require("uuid");

// diskStorage 磁盘存储引擎
const storage = multer.diskStorage({
  // 确定上传的文件应该存储在哪个文件夹中
  destination: function (req, file, cb) {
    let setPath = path.resolve(__dirname, "../public");
    // 判断当前是否创建了目标文件夹
    const isFile = fsExitSync(setPath);
    // 如果没有就创建
    if (!isFile) {
      fs.mkdirSync(setPath);
    }
    // 文件保存地址
    cb(null, setPath);
  },
  // 确定文件名
  filename: function (req, file, cb) {
    const ext = path.extname(file.originalname);
    // 使用uuid生成文件名
    cb(null, `${uuid.v1()}${ext}`);
  },
});

const uploadFile = multer({
  // 在哪里存储文件
  storage,
});

/**
 * 上传文件切片
 */
router.post("/uploadSliceFile", async (req, res) => {
  const single = uploadFile.single("file");
  single(req, res, async (err) => {
    let result = "";
    if (err) {
      // 发生错误
			result = {
        status: "fail",
        msg: "上传失败",
        data: {
          errInfo: err.message,
        },
      };
    } else {
      const { fileMd5, name } = req.body;
      //切片存放的文件夹所在路径
      const chunkPath = path.resolve(
        __dirname,
        "../public",
        fileMd5
      );
      // 判断当前是否创建了目标文件夹
      if(!fse.existsSync(chunkPath)) {
      	await fse.mkdir(chunkPath)
  		}

      // 将文件从临时路径里移动到文件夹下
      await fse.move(req.file.path, `${chunkPath}/${name}`);
			result = {
        status: "ok",
        msg: "上传成功!",
      };
    }
    res.send(result);
  });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

合并切片文件

切片的上传完成之后，合并切片

前端：

/**
 * 要传给服务端文件后缀，每个切片的大小和md5值
 */
const onMergeFile = () => {
	mergeFile({
		ext: uploadFile.value.name.split(".").pop(),
		size: CHUNK_SIZE,
		fileMd5: fileMd5.value,
	}).then((res) => {
		if (res.status === "ok") {
			ElMessage.success(res.msg);
		} else {
			ElMessage.error(res.msg);
		}
	});
};

/**
 * 上传切片
 */
const uploadChunks = (uploadedList) => {
	// ...

	Promise.all(requests).then((res) => {
		// 判断是否所有切片都上传成功
		let result = true;
		for (let i = 0; i < res.length; i++) {
			let item = res[i];
			if (item.status !== "ok") {
				result = false;
				return;
			}
		}
		// 判断所有请求都成功后发送请求给服务端合并文件
		if (result) {
			onMergeFile();
		}
	});
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

后端：

/**
 * 边读边合并至文件最终路径
 */
function mergeChunks(files, dest, CHUNK_SIZE) {
  const pipeStream = (filePath, writeStream) => {
    return new Promise((resolve) => {
      const readStream = fse.createReadStream(filePath);
      readStream.on("end", () => {
        //每一个切片读取完毕后就将其删除
        fse.unlinkSync(filePath);
        resolve();
      });
      readStream.pipe(writeStream);
    });
  };

  const pipes = files.map((file, index) => {
    return pipeStream(
      file,
      fse.createWriteStream(dest, {
        start: index * CHUNK_SIZE,
        end: (index + 1) * CHUNK_SIZE,
      })
    );
  });
  return Promise.all(pipes);
}

/**
 * 合并文件切片
 */
router.post("/mergeFile", async (req, res) => {
  const { ext, size, fileMd5 } = req.body;
  // 文件最终存放路径
  const filePath = path.resolve(__dirname, "../public", `${fileMd5}.${ext}`);

  // 保存切片的文件夹地址
  const chunkDir = path.resolve(
    __dirname,
    "../public",
    fileMd5
  );
  // 读取切片
  let chunks = await fse.readdir(chunkDir);
  // 切片要按顺序合并，因此需要做个排序
  chunks = chunks.sort((a, b) => a.split("-")[1] - b.split("-")[1]);
  // 计算切片的绝对路径
  chunks = chunks.map((cpath) => path.resolve(chunkDir, cpath));
	// 合并切片
  await mergeChunks(chunks, filePath, size);
	res.send({
		status: "ok",
		msg: "文件上传成功！"
	});
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

到这里一个简单的文件切片上传就完成了

优化

逐片上传

在上传切片的时候，现在都是并发上传，并发上传可以能会造成卡顿，且需要所有的切片都上传成功才会去执行合并，如果中间有一个没有成功，则直接取消上传，现在可以修改成一个一个上传，且在上传过程中如果有发生错误，则进行重新上传，当上传的错误次数超过3次时，才结束整个上传过程

/**
 * 上传切片
 */
const uploadChunks = (uploadedList) => {
	// 每上传一个切片都发送一个请求
	const requests = chunks.value
	.filter((chunk) => !uploadedList.includes(chunk.name)) // 先过滤还没有上传的切片
	.map((chunk) => {
		// 使用FormData来上传文件 因为保存的时候文件夹名为md5值，文件名为之前设置的md5 + '-' + index，所以需要将fileMd5和name一起上传
		const form = new FormData();
		form.append("file", chunk.chunk);
		form.append("fileMd5", chunk.fileMd5);
		form.append("name", chunk.name);
		// 因为切片上传不一定是连续的，所以index需要取chunk对象中的index
		return { form, index: chunk.index };
	});

	const sendRequest = () => {
		return new Promise((resolve, reject) => {
			const upLoadReq = (i) => {
				const req = requests[i];
				const { form, index } = req;
				uploadSliceFile(form, {
					onUploadProgress: (progress) => {
						chunks.value[index].progress = Number(
							((progress.loaded / progress.total) * 100).toFixed(2)
						); // 当前切片上传的进度
					},
				})
					.then(() => {
					// 判断是否为最后一个切片
					if (i == requests.length - 1) {
						resolve();
						return;
					}
					upLoadReq(i + 1);
				})
					.catch(() => {
					chunks.value[index].progress = -1;
					if (req.error < 3) {
						req.error++;
						// 错误累加后重试
						upLoadReq(i);
					} else {
						reject();
					}
				});
			};
			// 判断是否有切片需要上传
			if (requests.lenght > 0) {
				upLoadReq(0);
			} else {
				resolve();
			}
		});
	};
	// 切片都上传成功后再合并文件
	sendRequest().then(() => {
		onMergeFile();
	});
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

多个切片并发上传

逐个请求可以解决卡顿的问题，但是效率很低，我们还可以在这个基础上做到有限个数的并发。我们可以做一个队列，队列中的任务（假设是3个）每次从 requests 中拿取一个切片并上传，知道切片上传为止，如果请求失败，则把这个切片重新塞回到 requests 的队列中

/**
 * 上传切片
 */
const uploadChunks = (uploadedList) => {
	// 每上传一个切片都发送一个请求
	const requests = chunks.value
	.filter((chunk) => !uploadedList.includes(chunk.name)) // 先过滤还没有上传的切片
	.map((chunk) => {
		// 使用FormData来上传文件 因为保存的时候文件夹名为md5值，文件名为之前设置的md5 + '-' + index，所以需要将fileMd5和name一起上传
		const form = new FormData();
		form.append("file", chunk.chunk);
		form.append("fileMd5", chunk.fileMd5);
		form.append("name", chunk.name);
		// 因为切片上传不一定是连续的，所以index需要取chunk对象中的index
		return { form, index: chunk.index };
	});

	const sendRequest = (limit = 1) => {
		let count = 0; // 用于记录请求成功次数当其等于len-1时所有切片都已上传成功
		let isStop = false; // 标记错误情况，如果某一片错误数大于3整个任务标记失败 并且其他并发的请求凭次标记也不在递归执行
		const len = requests.length; // 需要上传的切片长度
		return new Promise((resolve, reject) => {
			const upLoadReq = (i) => {
				if (isStop) {
					return;
				}
				const req = requests.shift(); // 截取数组中的首个切片
				if (!req) {
					return;
				}
				const { form, index } = req;
				uploadSliceFile(form, {
					onUploadProgress: (progress) => {
						chunks.value[index].progress = Number(
							((progress.loaded / progress.total) * 100).toFixed(2)
						); // 当前切片上传的进度
					},
				})
					.then(() => {
					// 判断是否为最后一个切片
					if (count == len - 1) {
						resolve();
					} else {
						count++;
						upLoadReq();
					}
				})
					.catch(() => {
					chunks.value[index].progress = -1;
					if (req.error < 3) {
						req.error++;
						requests.unshift(req); // 如果失败了则把第一个切片放回去
						upLoadReq();
					} else {
						isStop = true;
						reject();
					}
				});
			};
			// 模拟形成了一个队列，每次结束再递归执行下一个任务
			while (limit > 0) {
				upLoadReq();
				limit--;
			}
		});
	};
	// 切片都上传成功后再合并文件
	sendRequest(3).then(() => {
		onMergeFile();
	});
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71