vue-upload-big-file v0.0.8

感谢使用该插件

• 第一步：npm install vue-upload-big-file
• 第二步：在main.js中引入并使用 import vueUploadBigFile from 'vue-upload-big-file' Vue.use(vueUploadBigFile)
• 第三步：在public文件下创建hash.js文件，并写入

// 通过内容计算md5值
self.importScripts('/spark-md5.min.js')

self.onmessage = e => {
	// self.postMessage({
	// 	"msg": "您好"
	// })
	const { fileChunkList } = e.data;
	const spark = new self.SparkMD5.ArrayBuffer();
	let percentage = 0;
	let count = 0;
	// console.log(fileChunkList, 'worker fileChunkList');
	// 计算出hash
	const loadNext = index => {
		const reader = new FileReader(); // 文件阅读对象
		reader.readAsArrayBuffer(fileChunkList[index].file);
		reader.onload = e => { // 事件
			count++;
			spark.append(e.target.result);
			if (count === fileChunkList.length)
			{
				self.postMessage({
					percentage: 100,
					hash: spark.end()
				});
				self.close(); // 关闭当前线程
			} else {
				// 还没读完
				percentage += 100/fileChunkList.length;
				self.postMessage({
					percentage
				});
				loadNext(count);
			}
		}
	}
	loadNext(0)
} // this 当前的线程

• 第四步：在public文件下添加spark-md5.min.js文件或下载spark-md5插件
• 第五步：在该窗体中使用插件，具体如下

<vue-upload-big-file :verifyUrl="" :uploadUrl="" :mergeUrl=""></vue-upload-big-file>

• 必传参数：

  verifyUrl(后端验证的接口地址) uploadUrl(后端上传的接口地址) mergeUrl(后端合并的接口地址)