文件上传之vuejs分块上传，js同理，可实现暂停、续传等

浅浅的花香味﹌ 2023-03-02 05:04 8阅读 0赞

前段代码

分块代码核心代码为：

const blob = rawFile.slice(start, end)

案例示例：

文件大于5242880（大概5M）时，我们将大文件拆分为5M大小的多个小块上传，后端再做拼接。这样不会出现，超大文件带来的一系列问题，并且可以实现暂停续传等操作。

一下为示例：

async function uploadEcm(rawFile, folderId) {
      const oktoken = await getToken()
      const firstN = rawFile.name.split('.')
      const fileName = firstN[0] + Math.random().toString(36) + '.' + firstN[firstN.length - 1]
      const data = new FormData()
      data.append('fileName', fileName)
      data.append('token', oktoken)
      data.append('folderId', folderId) // TODO
      data.append('size', rawFile.size)
      data.append('type', rawFile.type)
      data.append('attachType', 0)
      data.append('fileModel', 'UPLOAD')
      data.append('name', '')
      console.log('rawFile', rawFile)
      const result = await getRegHash(data, oktoken)
      let start = 0
      let end = 0
      const lentgh = 5242880
      const uploadId = guid()
      // 分块数
      const chunks = Math.ceil(rawFile.size / 5242880)
      if (chunks == 1) {
        await blockUpload(result, fileName, rawFile, chunks, 0, lentgh, rawFile.size, rawFile, oktoken, uploadId)
      } else if (chunks > 1) {
        for (let i = 0; i < chunks; i++) {
          let blockSize = lentgh
          if (i == (chunks - 1)) {
            blockSize = rawFile.size - end
            end = rawFile.size
          } else {
            end = start + lentgh
          }
          const blob = rawFile.slice(start, end)
          start = end
          await blockUpload(result, fileName, rawFile, chunks, i, lentgh, blockSize, blob, oktoken, uploadId)
        }
      }
      return new Promise(resolve => {
        resolve(result)
      })
    }

将每块上传后台：

function blockUpload(res, fileName, rawFile, chunks, i, lentgh, blockSize, blob, oktoken, uploadId) {
      return new Promise(resolve => {
        const data2 = new FormData()
        data2.append('uploadId', uploadId)
        data2.append('regionHash', res.data.data.RegionHash)
        data2.append('regionId', res.data.data.RegionId)
        data2.append('fileName', fileName)
        data2.append('size', rawFile.size)
        data2.append('chunks', chunks)
        data2.append('chunk', i)
        data2.append('chunkSize', lentgh)
        data2.append('blockSize', blockSize)
        data2.append('file', blob)
        console.log('res', res)
        myaxios.post(getEcmBaseUrl() + '/document/upload?code=&token=' + oktoken, data2, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          resolve(true)
        }).catch(reason => {
          resolve(false)
        })
      })
    }