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

前段代码

分块代码核心代码为：

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