前端实现分片上传功能-CRMEB社区

前端实现分片上传功能

管理

编辑

删除

前言：每次上传遇到大文件，上传速度和上传后接口响应都比较慢，为了提高用户体验，减少用户的等待时间，缓解服务器的压力。我们对大文件进行了分片上传，下面的具体思路和完整代码，有需要的小伙伴可以看看。

实现思路：

1. 文件 MD5 加密

MD5 是文件的唯一标识，可以利用文件的 MD5 查询文件的上传状态。

根据文件的内容、文件名称、文件大小等信息，通过 spark-md5[2] 生成文件的 MD5。

2. 文件分片

文件上传优化的核心就是文件分片，Blob 对象中的 slice 方法可以对文件进行切割，File 对象是继承 Blob 对象的，因此 File 对象也有 slice 方法。看自己项目需要设置分片大小，我们分片大小和后端约定是5MB。

3. 上传分片

上传所有的切片，将切片序号、切片文件、文件 MD5 传给后台。

后台接收到上传请求后，首先查看名称为文件MD5 的文件夹是否存在。

思路很简单，实现起来大家肯定各自有难度，下面的完整的代码，结合不同项目可以参考一下：

import SparkMD5 from 'spark-md5'
import request from '@/api/request'

/**
 * 分片上传
 * @param {Object} file- 文件内容
 * @param {Object} option- 需要给后端的参数
 * @param {String} url-上传给后台的接口地址
 */

export const uploadByPieces = (file, option, url) => {

  return new Promise(async (resolve, reject) => {
    // 1. 读取文件的md5
    let fileMD5
    let fileRederInstance = new FileReader()
    fileRederInstance.readAsBinaryString(file)
    fileRederInstance.addEventListener('load', (e) => {
      let fileBolb = e.target.result
      fileMD5 = SparkMD5.hashBinary(fileBolb)
      readChunkMD5(file, fileMD5, option)
    })

    // 2. 针对每个文件进行chunk处理
    const readChunkMD5 = async (file, md5, option) => {
      const chunkSize = 5 * 1024 * 1024 // 5MB一片
      const chunkCount = Math.ceil(file.size / chunkSize) // 总片数
      for (var i = 0; i < chunkCount; i++) {
        const { chunk } = getChunkInfo(file, i, chunkSize)
        await uploadChunk({ chunk, currentChunk: i, chunkCount, md5 }, option)
      }
    }
    
    const getChunkInfo = (file, currentChunk, chunkSize) => {
      let start = currentChunk * chunkSize
      let end = Math.min(file.size, start + chunkSize)
      let chunk = file.slice(start, end)
      chunk = blobToFile(chunk, file.name)
      return { start, end, chunk }
    }
    
    // Blob 转 File
    const blobToFile = (blob, fileName) => {
      const file = new File([blob], fileName, { type: blob.type })
      return file
    }
    
    // 3. 上传分片文件
    const uploadChunk = (chunkInfo, option) => {
      // 创建formData对象，下面是结合不同项目给后端传入的对象。
      let formData = new FormData()
      if (Object.keys(option).length > 0) {
        for (let key in option) {
          formData.append(key, option[key])
        }
      }
      formData.append('file', chunkInfo.chunk)
      formData.append('md5', chunkInfo.md5)
      formData.append('chunk_index', chunkInfo.currentChunk)
      formData.append('chunk_total', chunkInfo.chunkCount)
      request
        .post(url, formData)
        .then((res) => {
          if (res.data.src) {
            resolve(res)
          } else if (res.status !== 200) {
            reject(res)
          }
        })
        .catch((e) => {
          reject(e)
        })
    }
  })
}