java 上传大文件_Node + H5 实现大文件分片上传、断点续传

作者：TJ
转发链接：https://segmentfault.com/a/1190000022624799

前言

在开发过程中，收到这样一个问题反馈，在网站上传 100 MB 以上的文件经常失败，重试也要等老半天，这就难为需要上传大规格文件的用户了。那么应该怎么做才能快速上传，就算失败了再次发送也能从上次中断的地方继续上传呢？下文为你揭晓答案~

整体思路

第一步是结合项目背景，调研比较优化的解决方案。文件上传失败是老生常谈的问题，常用方案是将一个大文件切片成多个小文件，并行请求接口进行上传，所有请求得到响应后，在服务器端合并所有的分片文件。当分片上传失败，可以在重新上传时进行判断，只上传上次失败的部分，减少用户的等待时间，缓解服务器压力。这就是分片上传文件。

大文件上传

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

流程图如下：

分为以下步骤实现：

1. 文件 MD5 加密

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

根据文件的修改时间、文件名称、最后修改时间等信息，通过 spark-md5 生成文件的 MD5。需要注意的是，大规格文件需要分片读取文件，将读取的文件内容添加到 spark-md5 的 hash 计算中，直到文件读取完毕，最后返回最终的 hash 码到 callback 回调函数里面。这里可以根据需要添加文件读取的进度条。

实现方法如下：

// 修改时间+文件名称+最后修改时间-->MD5md5File (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()  })}

2. 查询文件状态

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

// 校验文件的MD5checkFileMD5 (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 对应的切片时，代表该切片需要上传，用户只需上传这部分切片，就可以完整上传整个文件，这就是文件的断点续传。

// 上传chunkupload (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)      })  })}

5. 上传进度

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

原生 Javascript 的 XMLHttpRequest 有提供 progress 事件，这个事件会返回文件已上传的大小和总大小。项目使用 axios 对 ajax 进行封装，可以在 config 中增加 onUploadProgress 方法，监听文件上传进度。

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

6. 合并分片

上传完所有文件分片后，前端主动通知服务端进行合并，服务端接受到这个请求时主动合并切片，通过文件 MD5 在服务器的文件上传路径中找到同名文件夹。从上文可知，文件分片是按照分片序号命名的，而分片上传接口是异步的，无法保证服务器接收到的切片是按照请求顺序拼接。所以应该在合并文件夹里的分片文件前，根据文件名进行排序，然后再通过 concat-files 合并分片文件，得到用户上传的文件。至此大文件上传就完成了。

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 点：

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

推荐JavaScript经典实例学习资料文章

《一文了解文件上传全过程(1.8w字深度解析)「前端进阶必备」》

《【实践总结】关于小程序挣脱枷锁实现批量上传》

《手把手教你前端的各种文件上传攻略和大文件断点续传》

《字节跳动面试官：请你实现一个大文件上传和断点续传》

《谈谈前端关于文件上传下载那些事【实践】》

《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》

《最全的 JavaScript 模块化方案和工具》

《「前端进阶」JS中的内存管理》

《JavaScript正则深入以及10个非常有意思的正则实战》

《前端面试者经常忽视的一道JavaScript 面试题》

《一行JS代码实现一个简单的模板字符串替换「实践」》

《JS代码是如何被压缩的「前端高级进阶」》

《前端开发规范：命名规范、html规范、css规范、js规范》

《【规范篇】前端团队代码规范最佳实践》

《100个原生JavaScript代码片段知识点详细汇总【实践】》

《关于前端174道 JavaScript知识点汇总(一)》

《关于前端174道 JavaScript知识点汇总(二)》

《关于前端174道 JavaScript知识点汇总(三)》

《几个非常有意思的javascript知识点总结【实践】》

《都2020年了，你还不会JavaScript 装饰器？》

《JavaScript实现图片合成下载》

《70个JavaScript知识点详细总结(上)【实践】》

《70个JavaScript知识点详细总结(下)【实践】》

《开源了一个 JavaScript 版敏感词过滤库》

《送你 43 道 JavaScript 面试题》

《3个很棒的小众JavaScript库，你值得拥有》

《手把手教你深入巩固JavaScript知识体系【思维导图】》

《推荐7个很棒的JavaScript产品步骤引导库》

《Echa哥教你彻底弄懂 JavaScript 执行机制》

《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》

《深入解析高频项目中运用到的知识点汇总【JS篇】》

《JavaScript 工具函数大全【新】》

《从JavaScript中看设计模式(总结)》

《身份证号码的正则表达式及验证详解(JavaScript，Regex)》

《浏览器中实现JavaScript计时器的4种创新方式》

《Three.js 动效方案》

《手把手教你常用的59个JS类方法》

《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》

《深入浅出讲解 js 深拷贝 vs 浅拷贝》

《手把手教你JS开发H5游戏【消灭星星】》

《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》

《手把手教你全方位解读JS中this真正含义【实践】》

《书到用时方恨少，一大波JS开发工具函数来了》

《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》

《手把手教你JS 异步编程六种方案【实践】》

《让你减少加班的15条高效JS技巧知识点汇总【实践】》

《手把手教你JS开发H5游戏【黄金矿工】》

《手把手教你JS实现监控浏览器上下左右滚动》

《JS 经典实例知识点整理汇总【实践】》

《2.6万字JS干货分享，带你领略前端魅力【基础篇】》

《2.6万字JS干货分享，带你领略前端魅力【实践篇】》

《简单几步让你的 JS 写得更漂亮》

《恭喜你获得治疗JS this的详细药方》

《谈谈前端关于文件上传下载那些事【实践】》

《面试中教你绕过关于 JavaScript 作用域的 5 个坑》

《Jquery插件(常用的插件库)》

《【JS】如何防止重复发送ajax请求》

《JavaScript+Canvas实现自定义画板》

《Continuation 在 JS 中的应用「前端篇」》

作者：TJ

转发链接：https://segmentfault.com/a/1190000022624799