来源：京东技术

Tech

导读

在互联网时代，大文件上传已成为常见的需求，无论是企业还是个人用户，都可能面临大文件传输的挑战。本文将分享一些实践经验，帮助更高效地处理大文件上传问题。我们将探讨选择合适的传输工具、优化网络设置、分块上传等策略，以及一些实用的技巧和注意事项。通过这些实践分享，将能够提高文件上传的成功率，节省时间并减少麻烦。让我们一起探索大文件上传的最佳实践吧！

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)

// 采用表单形式提交数据，不是必须这样const fileInfo = new FormData()  fileInfo.append('fileHash', fileHash)fileInfo.append('fileName', name)
// getFileStatusFn是向服务端请求的文件初始状态的 http 方法, await 标识这里是一个异步请求const res = await getFileStatusFn(fileInfo)

// 这里的 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)

   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);      }    }

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

// worker.jsself.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);}