大规格文件的上传优化思路详解

// 校验文件的MD5
checkFileMD5 (file, fileName, fileMd5Value, onError) {
 const fileSize = file.size
 const { chunkSize, uploadProgress } = this
 this.chunks = Math.ceil(fileSize / chunkSize)
 return new Promise(async (resolve, reject) => {
 const params = {
  fileName: fileName,
  fileMd5Value: fileMd5Value,
 }
 const { ok, data } = await services.checkFile(params)
 if (ok) {
  this.hasUploaded = data.chunkList.length
  uploadProgress(file)
  resolve(data)
 } else {
  reject(ok)
  onError()
 }
 })
}

3. 文件分片

文件上传优化的核心就是文件分片，Blob 对象中的 slice 方法可以对文件进行切割，File 对象是继承 Blob 对象的，因此 File 对象也有 slice 方法。

定义每一个分片文件的大小变量为 chunkSize，通过文件大小 FileSize 和分片大小 chunkSize 得到分片数量 chunks，使用 for 循环和 file.slice() 方法对文件进行分片，序号为 0 - n，和已上传的切片列表做比对，得到所有未上传的分片，push 到请求列表 requestList。

async checkAndUploadChunk (file, fileMd5Value, chunkList) {
 let { chunks, upload } = this
 const requestList = []
 for (let i = 0; i < chunks; i++) {
 let exit = chunkList.indexOf(i + '') > -1
 // 如果已经存在, 则不用再上传当前块
 if (!exit) {
  requestList.push(upload(i, fileMd5Value, file))
 }
 }
 console.log({ requestList })
 const result =
 requestList.length > 0
  ? await Promise.all(requestList)
  .then(result => {
   console.log({ result })
   return result.every(i => i.ok)
  })
  .catch(err => {
   return err
  })
  : true
 console.log({ result })
 return result === true
}

4. 上传分片

调用 Promise.all 并发上传所有的切片，将切片序号、切片文件、文件 MD5 传给后台。

后台接收到上传请求后，首先查看名称为文件 MD5 的文件夹是否存在，不存在则创建文件夹，然后通过 fs-extra 的 rename 方法，将切片从临时路径移动切片文件夹中，结果如下：

当全部分片上传成功，通知服务端进行合并，当有一个分片上传失败时，提示“上传失败”。在重新上传时，通过文件 MD5 得到文件的上传状态，当服务器已经有该 MD5 对应的切片时，代表该切片已经上传过，无需再次上传，当服务器找不到该 MD5 对应的切片时，代表该切片需要上传，用户只需上传这部分切片，就可以完整上传整个文件，这就是文件的断点续传。

// 上传chunk
upload (i, fileMd5Value, file) {
 const { uploadProgress, chunks } = this
 return new Promise((resolve, reject) => {
 let { chunkSize } = this
 // 构造一个表单，FormData是HTML5新增的
 let end =
  (i + 1) * chunkSize >= file.size ? file.size : (i + 1) * chunkSize
 let form = new FormData()
 form.append('data', file.slice(i * chunkSize, end)) // file对象的slice方法用于切出文件的一部分
 form.append('total', chunks) // 总片数
 form.append('index', i) // 当前是第几片
 form.append('fileMd5Value', fileMd5Value)
 services
  .uploadLarge(form)
  .then(data => {
  if (data.ok) {
   this.hasUploaded++
   uploadProgress(file)
  }
  console.log({ data })
  resolve(data)
  })
  .catch(err => {
  reject(err)
  })
 })
}
 2/4   首页 上一页 1 2 3 4 下一页 尾页