crmeb_shop/template/admin/src/utils/upload.js

import md5 from 'js-md5'; //引入MD5加密
import { upload } from '@/api/upload.js'; // 这里指前端调用接口的api方法
export const uploadByPieces = ({ file, pieceSize = 2, success, error, uploading }) => {
  // 如果文件传入为空直接 return 返回
  if (!file) return;
  let fileMD5 = ''; // 总文件列表
  const chunkSize = pieceSize * 1024 * 1024; // 5MB一片
  const chunkCount = Math.ceil(file.size / chunkSize); // 总片数
  // 获取md5
  const readFileMD5 = () => {
    // 读取视频文件的md5
    console.log('获取文件的MD5值');
    let fileRederInstance = new FileReader();
    console.log('file', file);
    fileRederInstance.readAsBinaryString(file);
    fileRederInstance.addEventListener('load', (e) => {
      let fileBolb = e.target.result;
      fileMD5 = md5(fileBolb);
      console.log('fileMD5', fileMD5);
      console.log('文件未被上传，将分片上传');
      readChunkMD5();
    });
  };
  const getChunkInfo = (file, currentChunk, chunkSize) => {
    let start = currentChunk * chunkSize;
    let end = Math.min(file.size, start + chunkSize);
    let chunk = file.slice(start, end);
    return { start, end, chunk };
  };
  // 针对每个文件进行chunk处理
  const readChunkMD5 = async () => {
    // 针对单个文件进行chunk上传
    for (var i = 0; i < chunkCount; i++) {
      const { chunk } = getChunkInfo(file, i, chunkSize);
      console.log('总片数' + chunkCount);
      console.log('分片后的数据---测试：' + i);
      await uploadChunk({ chunk, currentChunk: i, chunkCount });
    }
  };
  const uploadChunk = (chunkInfo) => {
    // progressFun()
    return new Promise((resolver, reject) => {
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      };
      // 创建formData对象，下面是结合不同项目给后端传入的对象。
      let fetchForm = new FormData();
      fetchForm.append('chunkNumber', chunkInfo.currentChunk + 1); // 第几片
      fetchForm.append('chunkSize', chunkSize); // 分片大小的限制  例如限制 5M
      fetchForm.append('currentChunkSize', chunkInfo.chunk.size); // 每一片的大小
      fetchForm.append('file', chunkInfo.chunk); //每一片的文件
      fetchForm.append('filename', file.name); // 文件名
      fetchForm.append('totalChunks', chunkInfo.chunkCount); //总片数
      fetchForm.append('md5', fileMD5);
      upload(fetchForm, config)
        .then((res) => {
          console.log('分片上传返回信息：', res);
          if (res.data.code == 1) {
            // // 结合不同项目 将成功的信息返回出去
            // 下面如果在项目中没有用到可以不用打开注释
            uploading(chunkInfo.currentChunk + 1, chunkInfo.chunkCount);
            resolver(true);
          } else if (res.data.code == 2) {
            if (chunkInfo.currentChunk < chunkInfo.chunkCount - 1) {
              console.log('分片上传成功');
            } else {
              // 当总数大于等于分片个数的时候
              if (chunkInfo.currentChunk + 1 == chunkInfo.chunkCount) {
                console.log('文件开始------合并成功');
                success(res.data);
              }
            }
          }
        })
        .catch((e) => {
          error && error(e);
        });
    });
  };
  readFileMD5(); // 开始执行代码
};