文件分片上传

发布时间 2023-04-12 13:58:24作者: 随手笔记
// 默认按照10M切片  createFileChunk 文件切片函数,核心file.slice
const createFileChunk = (file, size = 10 * 1024) => {
  const fileChunkList = [];
  let cur = 0;
  while (cur < file.size) {
    fileChunkList.push({ file: file.slice(cur, cur + size) });
    cur += size;
  }
  return fileChunkList;
};
// 处理文件并分片上传
export const handleFileChunkUpload = file => {
  // fileList 文件切片后的list
  const fileList = createFileChunk(file);
  const { name, size } = file;
  // md5Str 文件唯一key值(使用md5加密)
  const md5Str = md5(`${name}_${new Date().getTime()}`);
  const formData = new FormData();
  const params = {
    chunks: fileList.length,
    size,
    name,
    md5: md5Str
  };
  for (const key in params) {
    formData.append(key, params[key]);
  }
  // 分片上传
  Promise.all(
    fileList.map(async ({ file }, index) => {
      // set方法如有重复key则覆盖,没有则新增属性
      formData.set('file', file);
      formData.set('chunk', index);
      await axios({
        method: 'post',
        url: 'xxxx',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        data: formData
      });
    })
  );
};