©2020-2024 ioDraw All rights reserved
一、安装 spark-md5
npm i spark-md5 --save
二、上传大文件组件（全代码）复制粘贴就能用
<template> <div class="myDiv"> <el-upload class="upload-demo" action="#"
:on-change="uploadFile" :show-file-list="true" :file-list="fileList"
:auto-upload="false" ref="uploadfile" :limit="1"> <el-button size="small"
type="primary" :loading="loadingFile">上传文件</el-button> </el-upload> </div>
</template> <script> import SparkMD5 from "spark-md5"; const chunkSize = 10 *
1024 * 1024;//定义分片的大小 暂定为10M，方便测试 import { message_s, message_w } from
'@/methods/element';//引入elementui消息提示框 export default { name: '', components:
{}, props: {}, data() { return { fileList: [], loadingFile: false } }, watch:
{}, computed: {}, methods: { /** * 上传文件 */ async uploadFile(File) {
this.loadingFile = true var self = this //获取用户选择的文件 const file = File.raw
this.currentFile = file //文件大小(大于100m再分片哦，否则直接走普通文件上传的逻辑就可以了，这里只实现分片上传逻辑) const
fileSize = File.size // 放入文件列表 this.fileList = [{ "name": File.name }] //
可以设置大于多少兆可以分片上传，否则走普通上传 if (fileSize <= chunkSize) {
console.log("上传的文件大于10m才能分片上传") } //计算当前选择文件需要的分片数量 const chunkCount =
Math.ceil(fileSize / chunkSize) console.log("文件大小：", (File.size / 1024 / 1024)
+ "Mb", "分片数：", chunkCount) //获取文件md5 const fileMd5 = await
this.getFileMd5(file, chunkCount); console.log("文件md5：", fileMd5)
console.log("向后端请求本次分片上传初始化") const initUploadParams = { "identifier": fileMd5,
//文件的md5 "filename": File.name, //文件名 "totalChunks": chunkCount, //分片的总数量 } //
调用后端检查文件上传情况接口 this.service("/upload/checkChunkExist", 'post',
initUploadParams, async (res) => { //分片上传成功且未合并，那就调用合并接口 if
(res.data.allUploadSuccess === true && res.data.mergeSuccess == false) {
console.log("当前文件上传情况：所有分片已在之前上传完成，仅需合并") self.composeFile(fileMd5, File.name,
chunkCount) self.storeBucket = "" self.loadingFile = false return false; } //
所有分片上传成功且合并成功，直接秒传 if (res.data.allUploadSuccess === true &&
res.data.mergeSuccess === true) { console.log("当前文件上传情况：秒传") self.loadingFile =
false message_s("上传成功") self.fileList = [] self.$refs.upload.clearFiles()
return false; } // 获取后端返回的已上传分片数字的数组 var uploaded = res.data.uploaded //
定义分片开始上传的序号 // 由于是顺序上传，可以判断后端返回的分片数组的长度，为0则说明文件是第一次上传，分片开始序号从0开始 //
如果分片数组的长度不为0，我们取最后一个序号作为开始序号 var num = uploaded.length == 0 ? 0 :
uploaded[uploaded.length - 1] console.log(num, '分片开始序号') //
当前为顺序上传方式，若要测试并发上传，请将103 行 await 修饰符删除即可 // 循环调用上传 for (var i = num; i <
chunkCount; i++) { //分片开始位置 let start = i * chunkSize //分片结束位置 let end =
Math.min(fileSize, start + chunkSize) //取文件指定范围内的byte，从而得到分片数据
console.log(File, '0000') let _chunkFile = File.raw.slice(start, end)
console.log(_chunkFile) console.log("开始上传第" + i + "个分片") let formdata = new
FormData() formdata.append('identifier', fileMd5) formdata.append('filename',
File.name) formdata.append('totalChunks', chunkCount)
formdata.append('chunkNumber', i) formdata.append('totalSize', fileSize)
formdata.append('file', _chunkFile) // 通过await实现顺序上传 await
this.getMethods(formdata) } // 文件上传完毕，请求后端合并文件并传入参数 self.composeFile(fileMd5,
File.name, chunkCount) }) }, /** * 上传文件方法 * @param formdata 上传文件的参数 */
getMethods(formdata) { return new Promise((resolve, reject) => {
this.service("/upload/chunk", 'post', formdata, (res) => { console.log(res)
resolve(); }) }); }, /** * 获取文件MD5 * @param file * @returns {Promise<unknown>}
*/ getFileMd5(file, chunkCount) { return new Promise((resolve, reject) => { let
blobSlice = File.prototype.slice || File.prototype.mozSlice ||
File.prototype.webkitSlice; let chunks = chunkCount; let currentChunk = 0; let
spark = new SparkMD5.ArrayBuffer(); let fileReader = new FileReader();
fileReader.onload = function (e) { spark.append(e.target.result);
currentChunk++; if (currentChunk < chunks) { loadNext(); } else { let md5 =
spark.end(); resolve(md5); } }; fileReader.onerror = function (e) { reject(e);
}; function loadNext() { let start = currentChunk * chunkSize; let end = start
+ chunkSize; if (end > file.size) { end = file.size; }
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); } loadNext();
}); }, /** * 请求后端合并文件 * @param fileMd5 文件md5 * @param fileName 文件名称 * @param
count 文件分片总数 */ composeFile(fileMd5, fileName, count) {
console.log("开始请求后端合并文件") var data = { "identifier": fileMd5, //文件的md5
"filename": fileName, //文件名 "totalChunks": count //分片的总数量 }
this.service('/upload/merge', 'post', data, (data) => { if (data.successful ==
true) { message_s(data.message) this.loadingFile = false
this.$refs.upload.clearFiles() } else { this.loadingFile = false
message_w(data.message) } }) }, }, created() { }, mounted() { } } </script>
<style lang="less" scoped> </style>