🤷‍♂️Vue-分片上传（demo）

分片上传（demo）

分片上传-附件

• 在components当中 ```javascript

<a name="dRZe2"></a>
###  配置文件  IFileConfig.js
```javascript
/**
 * @description：大文件上传配置
 * @author：宋乾
 * @date：Created in 2022/02/16 16:45
 * @modified By：
 * @version: 1.0.0
 */
export class IFileConfig {
  constructor() {}
  // id
  domId = "";
  // 是否多文件
  isMultiple = false;
  // 文件类型
  fileAccept = ".zip, .rar";
  // 切片长度
  sliceLength = 1024 * 1024 * 5; // 5M
  // 文件大小限制
  maxFileSize = 1024 * 1024 * 1024 * 5; // 5G
}

api接口

/**
 * @description：大文件上传api
 * @author：宋乾
 * @date：Created in 2022/02/16 16:45
 * @modified By：
 * @version: 1.0.0
 */
import request from "@/utils/axios";

/**
 * 上传分片
 * @returns
 */
export function fileSliceUpload(data) {
  return request({
    url: "/ami/ma01-02-056/minio-file/fileSliceUpload",
    method: "POST",
    data,
  });
}

/**
 * 合并文件分片
 * @returns
 */
export function mergeSlice(data) {
  return request({
    url: "/ami/ma01-02-056/minio-file/mergeSlice",
    method: "POST",
    data,
  });
}

/**
 * 小文件上传,不分片
 * @returns
 */
export function fileUpload(data) {
  return request({
    url: "/ami/ma01-02-056/minio-file/fileUpload",
    method: "POST",
    data,
  });
}

/**
 * 删除文件
 * @returns
 */
export function deleteFile(data) {
  return request({
    url: "/ami/ma01-02-056/minio-file/deleteFile",
    method: "POST",
    data,
  });
}

组件使用

<!----------------------------------------------------------------------------
 @description：大文件上传使用dome
 @author：宋乾
 @date：Created in  2022/2/17 09:36
 @modified By：
 @version: 1.0.0
 ---------------------------------------------------------------------------->

<template>
  <div>
    <div style="width: 350px">
      <FileUploader :config="config" @fileUploadFinished="fileUploadFinishedHandle" />
    </div>
  </div>
</template>

<script>
import FileUploader from "@/components/FileUploader";
import { IFileConfig } from "@/components/FileUploader/IFileConfig";
const config = new IFileConfig();
config.domId = "file";
config.isMultiple = true;
export default {
  name: "HugeFileUpload",
  components: {
    FileUploader,
  },
  data() {
    return {
      config: config,
    };
  },
  methods: {
    fileUploadFinishedHandle(e) {
      console.log(e);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped></style>