利用Vue3+Element-plus实现大文件分片上传组件
星海君的前端 人气:0一、背景
实际项目中遇到需要上传几十个G的3d模型文件,传统上传就不适用了。
结合element提供的上传组件自己封装了文件分片上传的组件。
思路:
- 把文件拆分成若干分片
- 依次上传分片(每次上传前可校验该分片是否已经上传)
- 发起合并分片的请求
二、技术栈
Vue3+Ts+Element-Plus
其他库:spark-md5
后端接口:
- 上传分片接口
- 校验分片是否已上传接口
- 合并分片接口
三、核心代码实现
Element组件基础配置
<el-upload drag :file-list="fileList" :on-change="onUpload" :auto-upload="false" ref="uploadfile" :limit="1" :show-file-list="false" ></el-upload>
这里有个点:必须要定义file-list属性,不然clearFiles等官方外部方法没有效果
核心方法就是onUpload
const onUpload = async (File:any) => { const chunkSize = 30 * 1024 * 1024; // 分片大小 const file = File.raw // 文件 const fileSize = File.size // 文件大小 let chunkCount = Math.ceil(fileSize / chunkSize) // 分片数量 if(chunkSize > fileSize){ // 文件过小就一片 chunkCount = 1 } // 文件md5,给文件一个唯一标识 const fileMd5 = await getFileMd5(file, chunkCount, chunkSize); // 上传分片 for( let i=0;i<chunkCount;i++) { const start = i * chunkSize //分片开始 const end = Math.min(fileSize, start + chunkSize) // 分片结束 const _chunkFile = File.raw.slice(start, end) // 分片文件 // 定义分片上传接口参数,跟后端商定 const formdata = new FormData() formdata.append('chunkNumber', i.toString()) formdata.append('chunkSize', _chunkFile.size) formdata.append('file', _chunkFile) formdata.append('fileName', File.name) formdata.append('fileSign', fileMd5) formdata.append('totalChunks', chunkCount.toString()) formdata.append('totalChunkSize', fileSize) // 检查分片文件是否上传-没有上传则上传 const params = { chunkNumber: i, fileSign: fileMd5 } const { data } = await checkChunkFile(params) // 检验接口-自己定义 if(!data.flag){ console.log("开始上传第" + i + "个分片") await uploadChunkFile(formdata) // 上传接口-自己定义 } } // 合并 const mergeData = { // 合并参数 fileName: File.name, fileSign: fileMd5, ... } mergeFile(mergeData)// 合并接口-自己定义 }
getFileMd5方法生成文件md5
const getFileMd5 = (file: File, chunkCount: number, chunkSize: number) => { return new Promise((resolve, reject) => { const blobSlice = File.prototype.slice const chunks = chunkCount let currentChunk = 0 const spark = new SparkMD5.ArrayBuffer() const fileReader = new FileReader() fileReader.onload = e => { spark.append(e.target?.result) currentChunk ++ if(currentChunk < chunks){ loadNext() } else { const md5 = spark.end() resolve(md5) } } fileReader.onerror = e => { reject(e) } function loadNext () { const start = currentChunk * chunkSize let end = start + chunkSize if(end > file.size){ end = file.size } fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)) } loadNext() }) }
getFileMd5 方法是同步任务,文件过大会等待很久,可对页面进行优化处理,不然会造成卡着没进行请求的错觉。
四、总结
至于其他进度条、组件参数等代码忽略掉了,可根据实际情况设计。
上面的核心代码很多内容是还可以拆分的,优化空间很大。
该组件是一个一个分片的上传,去掉await 就可以测试多个文件上传。
加载全部内容