前端大文件分片上传

1.分片上传整体流程

• 开始上传：前端启动文件分片上传。后端返回唯一标识。
  
• 分片上传：获取到上传的文件，然后设置一个固定的分片巨细，将文件切成多个小片，盘算出每一个分片的MD5值（32位）。将每个分片的内容和MD5标识符一同上传至服务器。服务端接收每个分片及相干信息后，通过对每个分片进行校验，来确保分片的完整性。
  
• 竣事上传：当分片上传完毕或者前端取消上传时，调用竣事上传接口竣事此次文件上传操纵。竣事上传时，服务端判定是正常竣事或取消上传来决定后续操纵。
  

2.前端具体流程

• 开始上传，发送开始上传请求，向服务器转达文件名、文件总巨细、分片总数和切片巨细，获取并保存文件上传的唯一标识符。同时在发送请求前，对上传的文件名进行校验，如果文件名超过最大长度256，则克制发送请求并向用户提示修改文件名称。
  
• 分片上传，起首将文件进行切片，调用切片方法时，必要将文件转达给该方法，然后根据文件的巨细来决定每个分片的巨细并切分成多个片段，同时盘算出总切片数，并为每个切片添加从0开始的顺序索引。随后对每个切片盘算出他们的MD5值。最后把这些分片的MD5值和顺序索引保存在浏览器内存中。然后发奉上传数据请求，向服务器发送唯一标识符、分片的顺序索引、分片数据，MD5值和当前分片的巨细。在每个分片发送请求后，如果发送乐成，则将其对应的信息从浏览器内存中删除，并盘算出此时的上传进度，然后发送下一个片段直至最后。如果全部上传乐成，清空浏览器内存。如果请求发生错误，则对该分片再次发送一次上传请求，如果仍然错误，不再上传，调用竣事请求并提示错误原因。
  
• 竣事上传，如果文件分片全部乐成上传，向服务器发送竣事请求，转达正常竣事状态码，清空浏览器内存。如果自动取消上传则转达取消请求状态码，同时清空浏览器内存，不再继续上传。
  

3.部分代码

1. //文件切片，utils
3. import SparkMD5 from 'spark-md5'
5. export async function getChunkList (files) {
6.         const file = files
7.         console.log(file);
8.         const fileSize = file.size // 文件大小
9.         const fileName = file.name
11.         let chunkSize = 0;
12.         if (fileSize <= 5 * 1024 * 1024) { // 0-5M，不分片
13.                 chunkSize = fileSize;
14.         } else if (fileSize <= 20 * 1024 * 1024) { // 5-20M，每个分片大小1M
15.                 chunkSize = 1024 * 1024;
16.         } else if (fileSize <= 50 * 1024 * 1024) { // 20-50M，每个分片大小2M
17.                 chunkSize = 2 * 1024 * 1024;
18.         } else if (fileSize <= 100 * 1024 * 1024) { // 50-100M，每个分片大小4M
19.                 chunkSize = 4 * 1024 * 1024;
20.         } else if (fileSize <= 200 * 1024 * 1024) { // 100-200M，每个分片大小6M
21.                 chunkSize = 6 * 1024 * 1024;
22.         } else if (fileSize <= 500 * 1024 * 1024) { // 200-500M，每个分片大小10M
23.                 chunkSize = 10 * 1024 * 1024;
24.         } else if (fileSize <= 1024 * 1024 * 1024) { // 500M-1G，每个分片大小20M
25.                 chunkSize = 20 * 1024 * 1024;
26.         } else { // 1G以上，每个分片大小20M
27.                 chunkSize = 20 * 1024 * 1024;
28.         }
29.         const totalChunks = Math.ceil(fileSize / chunkSize)
30.         let start = 0
31.         let end = Math.min(chunkSize, fileSize)
32.         let index = 0 // 分片索引,从0开始
33.         const chunks = [] // 存储当前文件的分片信息的数组
35.         while (start < fileSize) {
36.                 const chunk = file.slice(start, end)
37.                 const reader = new FileReader()
38.                 const promise = new Promise((resolve, reject) => {
39.                         reader.onload = (e) => { //读取文件分片信息，使用SparkMD5库计算分片的MD5值
40.                                 const spark = new SparkMD5.ArrayBuffer()
41.                                 spark.append(e.target.result)
42.                                 resolve(spark.end())
43.                         }
44.                         reader.onerror = (err) => {
45.                                 reject(err)
46.                         }
47.                 })
48.                 reader.readAsArrayBuffer(chunk)
49.                 try {
50.                         const md5 = await promise
51.                         const chunkInfo = { chunk, md5, index }
52.                         chunks.push(chunkInfo)
53.                 } catch (err) {
54.                         reject(err)
55.                 }
56.                 //更新循环起止位置
57.                 start = end
58.                 end = Math.min(start + chunkSize, fileSize)
59.                 index++
60.         }
61.         // 将当前文件的分片信息数组存入总的数组中
62.         return [chunks, totalChunks, fileSize, fileName, chunkSize] // 返回存储所有文件的分片信息的数组
63. }        

复制代码

1. async handleUpload () {
2.                         this.progressState = 'upload'
3.                         this.wrongNum = 0
4.                         if (this.fileList.length == 0) { //判断是否添加文件
5.                                 this.$notify.warning({
6.                                         title: this.$global.warningMessage.title,
7.                                         message: this.$global.warningMessage.fileMessage,
8.                                 });
9.                                 return
10.                         }
11.                         if (this.file.name.length > 256) {
12.                                 this.$notify.warning({
13.                                         title: this.$global.warningMessage.title,
14.                                         message: this.$global.warningMessage.fileNameMessage,
15.                                 });
16.                                 return
17.                         }
18.                         this.totalSize = this.file.size
19.                         // 调用getChunkList方法获取分片及相关信息
20.                         const [chunks, totalChunks, fileSize, fileName, chunkSize] = await getChunkList(this.file.raw)
21.                         this.totalChunks = totalChunks
22.                         this.fileSize = fileSize
23.                         this.fileName = fileName
24.                         this.chunkList = chunks
25.                         this.chunkSize = chunkSize
26.                         console.log(this.chunkList);
27.                         // 开始上传请求
28.                         await this.startUpload()
29.                         // 遍历分片信息数组，取出除文件分片外的其他信息
30.                         const sessionChunkList = this.chunkList.map(({ chunk, ...rest }) => rest);
31.                         // 将分片其他信息存入sessionStorage中
32.                         sessionStorage.setItem("chunkData", JSON.stringify(sessionChunkList));
33.                         let i = 0;
34.                         while (i < this.chunkList.length && this.wrongNum < 1) { //对分片数组进行遍历
35.                                 const chunkInfo = this.chunkList[i];
36.                                 const res = await this.uploadChunk(chunkInfo); //调用上传分片方法
37.                                 if (res.data.state == 200) {
38.                                         const removeInfo = {
39.                                                 md5: chunkInfo.md5,
40.                                                 index: chunkInfo.index
41.                                         }
42.                                         await this.handleSuccess(removeInfo, chunkInfo) //调用当前分片上传成功处理函数
43.                                         i++;
44.                                 } else {   //上传未成功，重新上传一次
45.                                         const res = await this.uploadChunk(chunkInfo);
46.                                         this.wrongNum += 1
47.                                         if (res.data.state == 200) {
48.                                                 this.wrongNum = 0
49.                                                 await this.handleSuccess(removeInfo, chunkInfo)
50.                                                 i++;
51.                                         } else {  // 重新上传一次后仍未成功
52.                                                 const state = this.$global.completeUploadState.cancelUpload
53.                                                 await this.completeUpload(state)
54.                                                 this.$notify.error({
55.                                                         title: this.$global.failedMessage.title,
56.                                                         message: res.data.message
57.                                                 });
58.                                                 this.handleClear()
59.                                                 return
60.                                         }
61.                                 }
62.                         }
63.                 }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。