基于JavaScript实现文件秒传功能

/**
 * @description: 分块计算文件hash
 * @param {*} file 文件对象
 * @param {*} chunkSize 分块计算的文件大小，默认10MB
 * @return {*}
 */
export function calculateSliceFileHash({ file, chunkSize = 10 * 1024 * 1024 }) {
  let currentChunkIndex = 0;
  const maxChunkCount = Math.ceil(file.size / chunkSize);
  let sha1WordArray = CryptoJS.algo.SHA1.create();
  const startTime = Date.now()
  return new Promise((resolve, reject) => {
    function loadNextChunk() {
      const start = currentChunkIndex * chunkSize;
      const end = Math.min(start + chunkSize, file.size);
      const reader = new FileReader();
      reader.onload = function (e) {
        const arrayBuffer = e.target.result;
        const wordArray = CryptoJS.lib.WordArray.create(arrayBuffer);
        sha1WordArray.update(wordArray);
        const diffTime = Date.now() - startTime
        if (currentChunkIndex < maxChunkCount - 1) {
          currentChunkIndex++;
          loadNextChunk()
        } else {
          const sha1 = sha1WordArray.finalize().toString(CryptoJS.enc.Hex); // CryptoJS.enc.Hex
          resolve({ sha1, diffTime }); // 返回计算出的hash值
        }
      };
      reader.onerror = function (error) {
        console.error('Error reading file chunk:', error);
        reject({ error: parseError(error) }); // 处理错误
      };
      const blobSlice = file.slice(start, end);
      reader.readAsArrayBuffer(blobSlice);
    }
    loadNextChunk();
  })
}

  async uploadFile(params) {
    // 获取hash
    const {sha1} = await calculateSliceFileHash({ file })
    // 根据hash查询文件状态
    const {data} = await this.axios.post(`/api/xxx`, params)
    const { key, bucket, region, state, url } = data.data
    // state='hasHash' | 'hashIng' | 'notHash'
 ...
 }

async uploadFile(params) {
...
    // 文件存在，直接返回结果
    if (state === 'hasHash') {
      return Promise.resolve({url})
    }
    // 文件已上传，后端处理中
    if (state === 'hashIng') {
      // 设置轮询开始时间
      if (!params.pollStartTs) {
        params.pollStartTs = Date.now()
      } else if (Date.now() - params.pollStartTs >= 60000) {
        // 轮询超过1分钟认定为超时
        return Promise.reject({ error: '文件加载超时，请稍后再试' })
      }
      await sleep(1000) // 每隔1s轮询
      await this.uploadFile(params)
    }
  	// state==='notHash'时，执行下面的上传
    return new Promise(async (resolve, reject) => {
      const cos = new Cos({
        getAuthorization: this.cosAuthorization({
          resolve,
          reject,
          bucket,
          key
        }).bind(this)
      })
      cos.sliceUploadFile(
        {
          Bucket: bucket,
          Region: region,
          Key: key,
          Body: file,
          SliceSize: 1024 * 1024 * 10, // 超10M使用分块（cos单个块最大不超过5GB）
          onProgress,
          onTaskReady
        },
        (error, data) => {
          if (error) {
            return reject({ error })
          }
          resolve(data)
        }
      )
    })
  }