利用Vue3+Element-plus實現大文件分片上傳組件

更新時間：2023年01月28日 14:19:24 作者：星海君的前端

在開發(fā)中如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進行上傳,將各個文件的切片傳遞給后臺,然后后臺再進行合并,下面這篇文章主要給大家介紹了關于利用Vue3+Element-plus實現大文件分片上傳組件的相關資料,需要的朋友可以參考下

一、背景

實際項目中遇到需要上傳幾十個G的3d模型文件，傳統上傳就不適用了。

結合element提供的上傳組件自己封裝了文件分片上傳的組件。

思路：

把文件拆分成若干分片
依次上傳分片（每次上傳前可校驗該分片是否已經上傳）
發(fā)起合并分片的請求

二、技術棧

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 方法是同步任務，文件過大會等待很久，可對頁面進行優(yōu)化處理，不然會造成卡著沒進行請求的錯覺。