大文件上传实践分享

京东云开发者
• 阅读 210

一、方案背景:

在此前的项目中有个需求是用户需要通过前端页面上传大约1.5G的压缩包,存储到OSS,后提供给其他用户下载。于是我开始了大文件上传方案的探索。本文主要探究的是前端技术实现,后端给予相应的支持。

二、 原理探索之路

2.1大文件上传想要实现的目标

在此项目中,我想实现的目标是

  1. 能够快速的将1.5G的文件上传到服务端, 由服务端进行存储,之后提供给其他设备下载。
  2. 能够支持在网络条件不好时实现 断点续传
  3. 能够在不同用户上传同一个文件包时执行秒传

2.2 实现思路

  1. spark-md5 计算文件的内容hash,以此来确定文件的唯一性

  2. 将文件hash发送到服务端进行查询,以此来确定该文件在服务端的存储情况,这里可以分为三种: 未上传、已上传、上传部分。(前提:分块大小固定)

  3. 根据服务端返回的状态执行不同的上传策略:

    • 已上传: 执行秒传策略,即快速上传(实际上没有对该文件进行上传,因为服务端已经有这份文件了),用户体验下来就是上传得飞快,嗖嗖嗖。。。
    • 未上传、上传部分: 执行计算待上传分块的策略
  4. 并发上传还未上传的文件分块。

  5. 当传完最后一个文件分块时,向服务端发送合并的指令,即完成整个大文件的分块合并,实现在服务端的存储。
    整体流程如下:

大文件上传实践分享
总结一下:将大文件通过切分成N个小文件,通过并发多个HTTP请求,实现快速上传;在每次上传前计算文件hash,带着这个文件hash去服务端查询该文件在服务端的存储状态,通过状态来判断需要上传的分块,实现断点续传、秒传。

三、实践之路

3.1 文件hash计算

本项目中计算文件hash的使用spark-md5

import SparkMD5 from 'spark-md5' 

const CHUNK_SIZE = 1024 * 1024 * 5   // 5M
// 对大文件进行分片
function sliceFile2chunk(file) {
  const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
  const fileChunks = []
  if (file.size <= CHUNK_SIZE) {
    fileChunks.push({ file })
  } else {
    let chunkStartIndex = 0
    while (chunkStartIndex < file.size) {
      fileChunks.push({ file: blobSlice(file, chunkStartIndex, chunkStartIndex + CHUNK_SIZE) })
      chunkStartIndex = chunkStartIndex + CHUNK_SIZE
    }
  }
  return fileChunks
}

function getFileHash(file) {
  let hashProcess = 0
  let fileHash = null
  // 这里需要使用异步执行,保证获取到hash后执行下一步
  return new Promise((resolve) => {
    const fileChunks = sliceFile2Chunk(file)
    const spark = new SparkMD5.ArrayBuffer()
    let hadReadChunksNum = 0
    const readFile = (chunkIndex) => {
      const fileReader = new FileReader()
      fileReader.readAsArrayBuffer(fileChunks[chunkIndex]?.file)
      fileReader.onload = (e) => {
        hadReadChunksNum++
        spark.append(e.target.result)
        if (hadReadChunksNum === fileChunks.length) {
          hashProcess = 100
          fileHash = spark.end()
          fileReader.onload = null
          resolve(fileHash)
        } else {
          hashProcess = Math.floor((hadReadChunksNum / fileChunks.length) * 100);
          readFile(hadReadChunksNum)
        }
      }
    }
    readFile(0)
  })
}
// await 用于表示这里是一个异步操作
const fileHash = await getFileHash(file)
const fileChunks = sliceFile2chunk(file)

这里将文件hash发送给服务端,获取服务端对该文件的存储状态

// 采用表单形式提交数据,不是必须这样
const fileInfo = new FormData()  
fileInfo.append('fileHash', fileHash)
fileInfo.append('fileName', name)

// getFileStatusFn是向服务端请求的文件初始状态的 http 方法, await 标识这里是一个异步请求
const res = await getFileStatusFn(fileInfo)  

3.2 根据服务端返回的状态执行不同的上传策略

根据服务端返回的状态,来计算出需要上传的文件分块,以分块下标来区分不同的块。

  • 0 未上传
  • 1 上传部分
  • 2 上传完成
    // 这里的 res 是文件在服务端的状态
    function createWait2UploadChunks(res) {
      if (res.data) {
        const wait2UploadChunks = []
        if (res.data.result === 0 ) {
          // 3.1中得到的文件 chunks
          fileChunks.forEach((item, index) => {
            const chunk = formateChunk(item, index)
            wait2UploadChunks.push(chunk)
          }, this)
        }
        if (res.data.result === 1) {
          const restFileChunksIndex = []
          // tagList 是服务端返回的已上传的文件块标识 类型是Array
          res.data.tagList.forEach((item) => {
            restFileChunksIndex.push(item.index)
          }, this)
          fileChunks.forEach((item, index) => {
            if (!restFileChunksIndex.includes(index)) {
              const chunk = formateChunk(item, index)
              wait2UploadChunks.push(chunk)
            }
          })
        }
        if(res.data.result === 2) {
          console.log('执行自定义的秒传操作')
        }
        return wait2UploadChunks
      }
    }

    // 该函数式对文件块进行标准化,这里可以与后端做协商得出的,看后端需要什么样的数据
    function formateChunk(item, index) {
      const chunkFormData = new FormData()
      chunkFormData.append("file", item.file);
      chunkFormData.append("index", index);
      chunkFormData.append("partSize", item.file.size);
      chunkFormData.append("fileHash", fileHash);
      return chunkFormData
    }
    // 入参是 3.2 得到的response, 出参事最终需要上传的分片
    const wait2UploadChunks = createWait2UploadChunks(res)  

3.3 并发上传还未上传的文件分块

这一步主要是将待上传的分块传输到服务端, 这里采用并发5(页面资源请求时,浏览器会同时和服务器建立多个TCP连接,在同一个TCP连接上顺序处理多个HTTP请求。所以浏览器的并发性就体现在可以建立多个TCP连接,来支持多个http同时请求。Chrome浏览器最多允许对同一个域名Host建立6个TCP连接,不同的浏览器有所区别。)个HTTP请求的方式进行上传,每当有一个请求完成后就新增一个分块传输请求,确保一直并发5个请求。

   const currentHttpNum = 0
   const maxHttpNum = 5
   const hasUploadedChunkNum = 0 
   const nextChunkIndex = 4
   const uploadProcess = 0
   uploadFileChunks()
   function uploadFileChunks() {
      wait2UploadChunks.slice(0, maxHttpNum).forEach((item) => {
        uploadFileChunk(item)
      }, this)
    }
    async function uploadFileChunk(chunkFormData) {
      try {
        currentHttpNum++
        const res = await uploadChunkFn(chunkFormData)  // uploadChunkFn是执行文件上传的HTTP请求
        currentHttpNum--
        if (res.code === 200) {
          if (hasUploadedChunkNum < wait2UploadChunks.length) {
            hasUploadedChunkNum++
          }
          if (wait2UploadChunks.length > ++nextChunkIndex) {
            uploadFileChunk(wait2UploadChunks[nextChunkIndex])
          }
          uploadProcess = Math.floor((hasUploadedChunkNum / wait2UploadChunks.length) * 100)
          if (currentHttpNum <= 0) {
          // 定义在 3.5
            mergeChunks()  // 第五步执行的函数
          }
        }
      } catch (error) {
        console.log(error);
      }
    }

3.4 向服务端发送合并的指令

当最后一个分块完成传输时,执行合并指令

   async mergeChunks() {
      try {
        const res = await mergeChunkFn({     //mergeChunkFn 是HTTP请求
          fileHash: fileHash,
        })
      } catch (error) {
        console.log(error);
      }
    }

四、可优化点

4.1 hash计算优化

hash计算可以利用 web worker 协程来计算,这里提供一下worker的实现:

// worker.js
self.addEventListener('message', function (e) {
  self.postMessage('You said: ' + e.data);
}, false);
self.close()   // self代表子线程自身,即子线程的全局对象

//  主线程
const worker = new Worker('./worker.js')  // 传入的是一个脚本
worker.postMessage('Hello World');
worker.onmessage = function (e) {
    console.log(e.data);
}

4.2 分块大小合理化

本项目实测用的5M的分片,具体的环境信息如下:

  1. 网络带宽: 10M/s
  2. 服务器: 2台 4核32G

各位可根据自己的实际条件,根据网络情况, 合理去制定分块大小。

4.3 多个客户端上传同一个文件包来缩减上传时间

大家可以考虑一下如何通过多个客户端来同时上传一个文件,以此来实现更快的上传?

最后欢迎大家交流学习,优化方案,共同成长。留下你的赞👍🏻

备注参考资料: 文件上传

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
java中使用restful web service来传输文件
【1】上传大文件:前端页面:1)同步上传:<html<body<formaction"http://localhost:8081/webProject/api/file/uploadFile"method"post"enctype"multipart/form
Easter79 Easter79
3年前
springboot2之优雅处理返回值
前言最近项目组有个老项目要进行前后端分离改造,应前端同学的要求,其后端提供的返回值格式需形如{"status":0,"message":"success","data":{}}方便前端数据处理。要实现前端同学这个需求,其实也挺简单的,
Wesley13 Wesley13
3年前
java之大文件断点续传
需求:支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验;内网百兆网络上传速度为12MB/S服务器内存占用低支持文件夹上传,文件夹中的文件数量达到1万个以上,且包含层级结构。支持PC端全平台操作系统,Windows,Linux,Mac支持文件和文件夹的批量下载,断点续传。刷新页面后继续传输。关闭浏览器后保
徐小夕 徐小夕
3年前
3分钟教你用原生js实现具有进度监听的文件上传预览组件
本文主要介绍如何使用原生js,通过面向对象的方式实现一个文件上传预览的组件,该组件利用FileReader来实现文件在前端的解析,预览,读取进度等功能,并对外暴露相应api来实现用户自定义的需求,比如文件上传,进度监听,自定义样式,读取成功回调等。组件设计架构如下:(https://imghelloworld.osscnbeijing.
Wesley13 Wesley13
3年前
PHP 文件上传的原理及案例分析
原理将客户端文件上传至服务器端,在服务器端临时存储,再将服务器端临时存储的文件移至指定位置实现文件上传需要的知识点:前端页面1.form表单必须是用post发送方式,因为get会将参数带到url中,而上传的文件转换后字符会很长,而且也是为了安全性2.form表单需要使用enctype
Wesley13 Wesley13
3年前
JS 异步分段上传文件
为了解决大文件上传(PHP上传最大限制2GB)同时为了解决文件上传是对服务器造成的压力可以通过分段上传解决这个问题,这得益于HTML5开发的fileAPI前台代码:引用了进度条插件myProgress.js<linkhref"__PUBLIC__/admin/css/myProgress.css"rel"stylesh
Wesley13 Wesley13
3年前
Git之提交错误:RPC failed; result=22, HTTP code = 411
这个问题刚开始,我一直以为是服务器有问题,后来发现是Git的最大文件限制,git的配置中http.postBuffer默认上限为1M所致问题上传报错,导致这个问题的原因是上传的文件超过了默认的配置上传的文件大小。error:RPCfailed;HTTP411curl22TherequestedURLret
前端文件上传的几种交互造轮子 | 京东云技术团队
前端文件上传本来是一个常规交互操作,没什么特殊性可言,但是最近在做文件上传,需要实现截图粘贴上传,去找了下有没有什么好用的组件,网上提供的方法有,但是没找完整的组件来支持cv上传,经过了解发现可以用剪贴板功能让自己的cv实现文件上传,于是自己就整合了目前几种文件上传的交互方式,码了一个支持cv的vue3文件上传组件(造个轮子)。
京东云开发者 京东云开发者
9个月前
大文件上传原理及实现方案 | 京东物流技术团队
一、什么是大文件一般,我们传送大文件是指传送大于100M的文件,而普通文件是指小于100M,常见的是20M、30M和50M,两者主要的区别在于文件大小上,还有传送速度上。一般普通“邮件附件”只能发20M、30M,50M的文件,而几百M的照片、文件、设计图等