关于javascript:大文件上传优化断点续传分片上传

第一步是联合我的项目背景，调研比拟优化的解决方案。文件上传失败是陈词滥调的问题，罕用计划是将一个大文件切片成多个小文件，并行申请接口进行上传，所有申请失去响应后，在服务器端合并所有的分片文件。当分片上传失败，能够在从新上传时进行判断，只上传上次失败的局部，缩小用户的等待时间，缓解服务器压力。这就是分片上传文件。

那么如何实现大文件分片上传呢？

流程图如下：

大文件上传流程图

分为以下步骤实现：

MD5 是文件的惟一标识，能够利用文件的 MD5 查问文件的上传状态。

依据文件的批改工夫、文件名称、最初批改工夫等信息，通过 spark-md5[2] 生成文件的 MD5。须要留神的是，大规格文件须要分片读取文件，将读取的文件内容增加到 spark-md5[3] 的 hash 计算中，直到文件读取结束，最初返回最终的 hash 码到 callback 回调函数外面。这里能够依据须要增加文件读取的进度条。

MD5 加密过程

实现办法如下：

// 批改工夫 + 文件名称 + 最初批改工夫 -->MD5
md5File (file) {return new Promise((resolve, reject) => {
    let blobSlice =
      File.prototype.slice ||
      File.prototype.mozSlice ||
      File.prototype.webkitSlice
    let chunkSize = file.size / 100
    let chunks = 100
    let currentChunk = 0
    let spark = new SparkMD5.ArrayBuffer()
    let fileReader = new FileReader()
    fileReader.onload = function (e) {console.log('read chunk nr', currentChunk + 1, 'of', chunks)
      spark.append(e.target.result) // Append array buffer
      currentChunk++
      if (currentChunk < chunks) {loadNext()
      } else {let cur = +new Date()
        console.log('finished loading')
        // alert(spark.end() + '---' + (cur - pre)); // Compute hash
        let result = spark.end()
        resolve(result)
      }
    }
    fileReader.onerror = function (err) {console.warn('oops, something went wrong.')
      reject(err)
    }
    function loadNext () {
      let start = currentChunk * chunkSize
      let end =
        start + chunkSize >= file.size ? file.size : start + chunkSize
      fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
    }
    loadNext()})
}

前端失去文件的 MD5 后，从后盾查问是否存在名称为 MD5 的文件夹，如果存在，列出文件夹下所有文件，失去已上传的切片列表，如果不存在，则已上传的切片列表为空。

// 校验文件的 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()}
  })
}

文件上传优化的外围就是文件分片，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
}

调用 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)
      })
  })
}

尽管分片批量上传比大文件单次上传会快很多，也还是有一段加载工夫，这时应该加上上传进度的提醒，实时显示文件上传进度。

原生 Javascript 的 XMLHttpRequest 有提供 progress 事件，这个事件会返回文件已上传的大小和总大小。我的项目应用 axios[4] 对 ajax 进行封装，能够在 config 中减少 onUploadProgress 办法，监听文件上传进度。

上传进度

const config = {
  onUploadProgress: progressEvent => {var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
  }
}
services.uploadChunk(form, config)

上传完所有文件分片后，前端被动告诉服务端进行合并，服务端承受到这个申请时被动合并切片，通过文件 MD5 在服务器的文件上传门路中找到同名文件夹。从上文可知，文件分片是依照分片序号命名的，而分片上传接口是异步的，无奈保障服务器接管到的切片是依照申请程序拼接。所以应该在合并文件夹里的分片文件前，依据文件名进行排序，而后再通过 concat-files 合并分片文件，失去用户上传的文件。至此大文件上传就实现了。

merge

合并分片示意图

Node 端代码：

// 合并文件
exports.merge = {
  validate: {
    query: {fileName: Joi.string()
        .trim()
        .required()
        .description('文件名称'),
      md5: Joi.string()
        .trim()
        .required()
        .description('文件 md5'),
      size: Joi.string()
        .trim()
        .required()
        .description('文件大小'),
    },
  },
  permission: {roles: ['user'],
  },
  async handler (ctx) {const { fileName, md5, size} = ctx.request.query
    let {name, base: filename, ext} = path.parse(fileName)
    const newFileName = randomFilename(name, ext)
    await mergeFiles(path.join(uploadDir, md5), uploadDir, newFileName, size)
      .then(async () => {
        const file = {
          key: newFileName,
          name: filename,
          mime_type: mime.getType(`${uploadDir}/${newFileName}`),
          ext,
          path: `${uploadDir}/${newFileName}`,
          provider: 'oss',
          size,
          owner: ctx.state.user.id,
        }
        const key = encodeURIComponent(file.key)
          .replace(/%/g, '')
          .slice(-100)
        file.url = await uploadLocalFileToOss(file.path, key)
        file.url = getFileUrl(file)
        const f = await File.create(omit(file, 'path'))
        const files = []
        files.push(f)
        ctx.body = invokeMap(files, 'toJSON')
      })
      .catch(() => {throw Boom.badData('大文件分片合并失败，请稍候重试~')
      })
  },
}

本文讲述了大规格文件上传优化的一些做法，总结为以下 4 点：

Blob.slice 将文件切片，并发上传多个切片，所有切片上传后告知服务器合并，实现大文件分片上传；
原生 XMLHttpRequest 的 onprogress 对切片上传进度的监听，实时获取文件上传进度；
spark-md5 依据文件内容算出文件 MD5，失去文件惟一标识，与文件上传状态绑定；
分片上传前通过文件 MD5 查问已上传切片列表，上传时只上传未上传过的切片，实现断点续传。

关于javascript:大文件上传优化断点续传分片上传

整体思路

大文件上传

1. 文件 MD5 加密

2. 查问文件状态

3. 文件分片

4. 上传分片

5. 上传进度

6. 合并分片

总结