3.js - H5 上传(FE 部分)2024-03-28

4.js - Promise/A+ 的最简实现2024-05-16

async function action(file) {
  const fileHash = await computedFileHash(file);
  const chunks = createChunks(file, {
    chunkSize: 1024 * 10,
    fileHash
  });
}

/**
 * 文件切片群上传
 * 
 * @param {Object} chunks 文件切片群
 */
function uploadChunks(chunks, maxRequest = 6) {
  return new Promise((resolve, reject) => {
    if (!chunks.length) resolve([]);

    let requestSliceArr = [];
    let start = 0;
    let index = 0;
    let requestResults = [];
    let requestErrResults = [];

    while(start < chunks.length) {
      const stop = start + maxRequest;

      requestSliceArr.push(chunks.slice(start, stop));
      start = stop;
    }

    const request = async () => {
      if (index > requestSliceArr.length - 1) return resolve(requestResults);

      let sliceChunks = requestSliceArr[index++];

      Promise.all(sliceChunks.map(chunk => uploadHandler(chunk)))
        .then(res => {
          requestResults.push(...(Array.isArray(res) ? res : []));
          request(); // 循环调用
        })
        .catch((err) => {
          requestErrResults.push(...(Array.isArray(err) ? err : []))
          reject(requestErrResults);
      })
    }

  })
}

/**
 * 单个文件切片上传逻辑
 * 
 * @param {Object} chunk 文件切片
 */
function uploader(chunk, url) {
  return new Promise((resolve, reject) => {
    const fd = new FormData();
    const { file, fileHash, chunkIndex } = chunk;

    fd.append('file', file);
    fd.append('fileHash', fileHash);
    fd,append('chunkIndex', chunkIndex);

    fetch(url, {
      method: 'POST',
      body: fd,
    }).then(res => {
      chunk.uploaded = true;
      resolve(res.json());
    }).catch(err => reject(err));
  });
}

const defaultChunkOptions = {
  chunkSize: 1024 * 1024 * 1,
}

function createChunks(file, options = defaultChunkOptions) {
  const _opts = {
    ...defaultChunkOptions,
    ...options,
  };
  const { chunkSize, fileHash } = _opts;
  const chunks = [];
  let start = index = 0;

  while (start < file.size) {
    const stop = start + chunkSize;
    const currentChunk = file.slice(start, stop);

    chunks.push({
      file: currentChunk,
      uploaded: false,
      chunkIndex: index++,
      fileHash
    });
    start = stop;
  }

  return chunks;
}

// -------------- utils --------------
function computedFileHash(file) {
  return new Promise((resolve) => {
    const fileReader = new FileReader();

    fileReader.onload = e => {
      resolve(SparkMD5.ArrayBuffer.hash(e.target.result));
    };
    fileReader.readAsArrayBuffer(file);
  })
}