React大文件分片上传原理及方案

const createFileChunk = async (file: Blob, size: number) => {
  const fileChunkList = [];
  let cur = 0;
  let index = 0;
  while (cur < file.size) {
    const chunk = file.slice(cur, cur + size);
    fileChunkList.push({ file: chunk, index }); // 可以加入很多信息。比如MD5
    cur += size;
    index += 1;
  }
  return fileChunkList;
};
const beforeUpload = (file: Blob) => {
	const fileChunkList = createFileChunk(file);
	// 其他自定义逻辑
	return true
}

import md5 from 'md5';
const getFileMd5 = (chunk: Blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(chunk);
    reader.onload = (data) => {
      resolve(md5(new Uint8Array(data.target?.result as any))); //类型化数组
    };
    reader.onerror = () => {
      reject(new Error('Failed to read file!'));
    };
  });
};

const fileToBase64 = (file: Blob): Promise<string> => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {
      if (e && e.target && e.target.result) {
        resolve(e.target.result);
      }
    };
  });
};

  const formData = new FormData();
  formData.append('file', file); // file为Blob对象