文件分片上传

import md5 from 'md5';
import fetch from './fetch';
const baseUrl = '/xxx';
// 分片上传的公共接口
const separateFileUpload = data => {
  return fetch({
    url: `${baseUrl}/xxxx`,
    method: 'post',
    data,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
};
/**
 * @description: 生成切片
 * @param {*} file 文件
 * @param {*} size 切片大小
 * @return {*}
 */
// 默认按照10M切片
const createFileChunk = (file, size = 10 * 1024 * 1024) => {
  const fileChunkList = [];
  let cur = 0;
  while (cur < file.size) {
    fileChunkList.push({ file: file.slice(cur, cur + size) });
    cur += size;
  }
  return fileChunkList;
};
/**
 * @description: 分片上传
 * @param {*} file 文件
 * @return {*}
 */
export const handleFileChunkUpload = async file => {
  const fileList = createFileChunk(file);
  const { name, size } = file;
  const md5Str = md5(`${name}_${new Date().getTime()}`);
  // 不变的参数
  const params = {
    chunks: fileList.length,
    size,
    name,
    md5: md5Str
  };
  await Promise.all(
    fileList.map(({ file }, index) => {
      // 每次都是新的formData
      const formData = new FormData();
      formData.append('file', file);
      formData.append('chunk', index);
      for (const key in params) {
        formData.append(key, params[key]);
      }
      return separateFileUpload(formData);
    })
  );
  const data = {
    fileName: name,
    fileNameMd5: md5Str,
    fileSize: size
  };
  // 保存时需要的标识
  return data;
};

在项目中使用还是得搭配async和await使用
const handleFile = async file => {
const data = await handleFileChunkUpload(file)
}