eggJS大文件分片上传与合并

最新推荐文章于 2024-08-10 23:14:08 发布

DavidWongSssss

最新推荐文章于 2024-08-10 23:14:08 发布

阅读量3.2k

点赞数 2

分类专栏： Egg Vue Node js 文章标签： eggjs大文件上传视频分片上传与合并

本文链接：https://blog.csdn.net/Park_Geun_hye/article/details/83957389

版权

本文介绍了使用Vue和Axios在前端实现大文件分片上传，配合EggJS后端进行文件接收与合并的详细过程。通过前端分片上传，解决了大文件一次性上传可能导致的网络中断问题，后端通过接收到的分片进行重组，确保文件完整。

摘要由CSDN通过智能技术生成

前台上传使用vue+axios

前台代码：

// 计算分片总数
for (let i = 0; i < Math.ceil(this.file.size / this.uploadFragment.fragment); i++) {
	this.uploadFragment.fragmentSum.push(i);
}

const upload = function(arr, that) {
	const frag = arr.shift();
	let start = frag * that.uploadFragment.fragment;
	// 当前分片结束下标
	let end = Math.min(that.file.size, start + that.uploadFragment.fragment);
	// 文件内容
	let param = new FormData(); // 创建form对象
	param.append('file', that.file.slice(start, end), that.file.name);

	const reqData = {
		param,
        fragmentIndex: frag+1,
		// 还可以加上别的数据上传，用请求header带上
	};

	that.teacherUploadVideo(reqData).then(result => {
		that.uploadFragment.fragmentList.push(result);
        // 通知父组件已经开始上传，打开进度条，并带上进度参数
		that.$emit('onUploading', Math.round(end / that.file.size * 100));
		// 最后一次请求就发送合并请求
		if (arr.length <=