vue-upload-big-file
v0.0.8
Published
大文件上传
Downloads
9
Readme
感谢使用该插件
- 第一步: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(后端合并的接口地址)