大文件分片上传

elementUI非常便利，功能也非常强大但是有的时候需要自定义一些功能，例如，上传文件过大时需要将文件分片上传，下面我就文件分片上传的实现，简单的叙述一下，希望后来者能少踩一些坑。
封装upload.js文件

export const uploadByPieces = ({
  file,
  pieceSize = 1,
  baseURL,
  urlAddress,
  success,
  error
}) => {
  // console.log(file)
  // 上传过程中用到的变量
  const chunkSize = pieceSize * 1024 * 1024; // 1MB一片
  const chunkCount = Math.ceil(file.size / chunkSize); // 总片数
  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 readChunk = () => {
    // 针对单个文件进行chunk上传
    const { chunk } = getChunkInfo(file, 0, chunkSize);
    uploadChunk({ chunk, currentChunk: 0, chunkCount });
  };
  const uploadChunk = chunkInfo => {
    let fetchForm = new FormData();
    fetchForm.append("chunk", chunkInfo.currentChunk);
    fetchForm.append("chunkSize", chunkSize);
    fetchForm.append("chunks", chunkInfo.chunkCount);
    fetchForm.append("file", chunkInfo.chunk);
    fetchForm.append("name", file.name);
    if (file.workID) {
      fetchForm.append("workID", file.workID);
    }
    if (file.moduleName) {
      fetchForm.append("moduleName", file.moduleName);
    }
    uploadChunkAxios(baseURL, urlAddress, fetchForm)
      .then(res => {
        if (res.code === 20000) {
          // success && success(res)
          if (chunkInfo.currentChunk < chunkInfo.chunkCount - 1) {
            const { chunk } = getChunkInfo(
              file,
              chunkInfo.currentChunk + 1,
              chunkSize
            );
            uploadChunk({
              chunk,
              currentChunk: chunkInfo.currentChunk + 1,
              chunkCount: chunkInfo.chunkCount
            });
            res.chunk = chunkInfo.currentChunk + 1;
            res.chunkCount = chunkInfo.chunkCount;
            success && success(res);
          } else {
            // 当总数大于等于分片个数的时候
            if (chunkInfo.currentChunk >= chunkInfo.chunkCount - 1) {
              res.chunk = chunkInfo.currentChunk + 1;
              res.chunkCount = chunkInfo.chunkCount;
              console.log("文件上传成功");
              success && success(res);
            }
          }
        } else {
          console.log(res.message);
          error && error(e);
        }
      })
      .catch(e => {
        console.log(e);
        error && error(e);
      });
  };
  readChunk(); // 开始执行代码
};

 

 

调用js文件

import { uploadByPieces } from "@/assets/js/upload";

调用上传组件

 handleChange(file, fileLists) {
      // 分片上传
      this.fileList = fileLists.slice(-1);
      this.upLoadData = file.raw;
      _self.upLoadData["workID"] = _self.commonUpload.workID;
      _self.upLoadData["moduleName"] = _self.commonUpload.moduleName;
      _self.disabled = true;
      uploadByPieces({
        file: this.upLoadData, // 文件实体
        pieceSize: 1, // 分片大小
        baseURL: baseURL,
        urlAddress: "/file/upload", // 上传路径
        success: response => {
          _self.uploadPercen = "display:block;";
          _self.count = response.chunk;
          _self.totalcount = response.chunkCount;
          _self.progress = parseInt((_self.count / _self.totalcount) * 100);
          if (response.chunk === response.chunkCount) {
            _self.uploadPercen = "display:none;";
            _self.count = 0;
            _self.totalcount = 0;
            _self.progress = 0;
            _self.disabled = false;
            _self.$emit("update", response.data);
            // 初始化
            _self.deptInfoTable = response.data.TableList;
            _self.filedID = response.data.FileID;
            _self.$notify({
              title: "Success",
              message: "上传成功。",
              type: "success",
              duration: 2000
            });
          }
        },
        error: e => {
          _self.disabled = false;
          _self.$notify.error({
            title: "Error",
            message: "上传失败。"
          });
        }
      });
    },

这样就会实现大文件分片上传！