cnhis-design-vue 2.1.58 → 2.1.59

package/packages/upload/chunk-upload/chunk-upload-new.vue

@@ -1,1001 +1,1001 @@
-<template>
-  <div class="chunk-upload-container">
-    <!-- 上传 -->
-    <uploader
-      ref="uploader"
-      :options="options"
-      :autoStart="autoStart"
-      @file-added="onFileAdded"
-      @file-success="onFileSuccess"
-      @file-progress="onFileProgress"
-      @file-error="onFileError"
-      class="uploader-app"
-    >
-      <uploader-unsupport></uploader-unsupport>
-
-      <uploader-drop>
-        <div class="drap-container dragger-btn" @click="hanldeDraggerBtnClick">
-          <a-icon type="folder-add" />
-          <p>点击或将文件拖拽到这里上传</p>
-        </div>
-      </uploader-drop>
-
-      <uploader-list>
-        <div slot-scope="props" class="file-list-conatiner">
-          <ul class="file-list">
-            <li v-for="file in props.fileList" :key="file.id">
-              <uploader-file :class="'file_' + file.id" ref="files" :file="file" :list="true">
-                <div
-                  slot-scope="props"
-                  class="c-file-container"
-                  :class="{
-                    'file-boder-bottom': ['complete', 'failed'].includes(
-                      getUploadShowStatus(file, 'status')
-                    )
-                  }"
-                >
-                  <!-- icon -->
-                  <div class="c-f-item">
-                    <div class="c-f-item-icon">
-                      <a-icon type="paper-clip" style="color:#5585F5;" />
-                    </div>
-                    <div class="c-f-item-info">
-                      <!-- <a-spin
-                            :spinning="
-                              ['uploading', 'merging'].includes(getUploadShowStatus(file, 'status'))
-                            "
-                          > -->
-                      <div class="c-f-item-info-title">
-                        <span class="title">
-                          {{ file.name }}
-                        </span>
-                        <span class="size"> ({{ props.formatedSize }}) </span>
-                      </div>
-                      <div class="c-f-item-info-time">
-                        <span>
-                          {{ props.formatedTimeRemaining }}
-                        </span>
-                        <span>
-                          {{ getUploadShowStatus(file, "text") }}
-                        </span>
-                      </div>
-                      <!-- </a-spin> -->
-
-                      <!-- {{ props.progress }} -->
-                    </div>
-                    <div class="c-f-item-btn">
-                      <!-- <a-icon type="redo" @click="file.resume()" />
-                      <a-icon type="pause" @click="file.pause()" /> -->
-                      <a-icon type="close" @click="handleRemove(file)" />
-
-                      <!-- .pause() 暂停上窜文件。
-                          .resume() 继续上传文件。
-                          .cancel() 取消上传且从文件列表中移除。
-                          .retry() 重新上传文件。 -->
-                    </div>
-                  </div>
-
-                  <a-progress
-                    :percent="formatedProgress(props.progress, file)"
-                    :show-info="false"
-                    :strokeWidth="2"
-                  />
-                </div>
-              </uploader-file>
-            </li>
-            <!-- <div class="no-file" v-if="!props.fileList.length">
-                  <i class="iconfont icon-empty-file"></i> 暂无待上传文件
-                </div> -->
-          </ul>
-        </div>
-      </uploader-list>
-
-      <div class="upload-btn">
-        <uploader-btn v-show="false" :attrs="btnAttrs" ref="uploadBtn">
-          <span>
-            上传新文件
-          </span></uploader-btn
-        >
-        <a-button type="primary" class="mgl-10" @click="handleStartUpload">开始上传</a-button>
-      </div>
-    </uploader>
-  </div>
-</template>
-
-<script>
-/**
- * getChunkUploadConfig()
- */
-import {
-  Uploader,
-  UploaderBtn,
-  UploaderDrop,
-  UploaderUnsupport,
-  UploaderList,
-  // UploaderFiles,
-  UploaderFile
-} from "vue-simple-uploader";
-import SparkMD5 from "spark-md5";
-import axios, { CancelToken } from "axios";
-import {Progress,Button,Icon} from 'ant-design-vue'
-var instance = axios.create({});
-const chunkSize = 3 * 1024 * 1024;
-let count = 1;
-export default {
-  name: "chunkUploadCom",
-  props: {
-    propsVisible: {
-      type: Boolean,
-      default: false
-    },
-    propsCategoryMap: {
-      type: String,
-      default: ""
-    },
-    max_size: {
-      type: String,
-      default: ""
-    },
-    maxLength: {
-      type: Number,
-      default: 0
-    },
-    defaultList: {
-      type: Array,
-      default: () => []
-    },
-    // 临时自测使用
-    // uploadArguments: {
-    //   type: Object,
-    //   default: () => {
-    //     return {
-    //       type: "video"
-    //     };
-    //   }
-    // },
-
-    uploaderType: {
-      type: String,
-      default: "video"
-    },
-
-    getChunkUploadConfig:{
-      type: Function,
-      default: () => Promise.resolve({})
-    }
-  },
-  data() {
-    return {
-      spinning: false,
-      uploadConfig: {},
-      options: {
-        target: this.handleGetTargetUrl,
-        chunkSize: chunkSize,
-        fileParameterName: "file",
-        maxChunkRetries: 3, // 上载失败之前，块的最大重试次数
-        simultaneousUploads: 3, // 分片同时上传数
-        prioritizeFirstAndLastChunk: true,
-        forceChunkSize: true,
-        testChunks: false, // 是否开启服务器分片校验
-        // 服务器分片校验函数，秒传及断点续传基础
-        // checkChunkUploadedByResponse: this.checkChunkUploadedByResponse,
-        headers: this.handleProcessHeaders,
-        query() {},
-        processParams: this.handleProcessParams,
-        parseTimeRemaining: this.parseTimeRemaining,
-        processResponse: this.processResponse
-      },
-      attrs: {},
-      collapse: false,
-
-      configList: [],
-      share: 1, // 是否共享 0私有  1共享
-      baseUrl: "http://192.168.20.113:12060",
-      headers: {
-        Authorization: "bearer " + "d012a22a9f284801b1bed4c20f3715de"
-      },
-      withCredentials: false
-    };
-  },
-  created() {
-    this.init()
-  },
-  mounted() {},
-  computed: {
-    // Uploader实例
-    uploader() {
-      return this.$refs.uploader.uploader;
-    },
-    // 读取到文件自动上传
-    autoStart() {
-      return false;
-    },
-    visible: {
-      get() {
-        return this.propsVisible;
-      }
-    },
-    btnAttrs() {
-      return {
-        accept: this.propsCategoryMap
-      };
-    },
-
-    uploadArgumentsObj() {
-      return { ...this.uploadArguments, share: this.share };
-    },
-
-    channel() {
-      if (Object.keys(this.uploadConfig || {}).length === 0) {
-        return undefined;
-      }
-      return this.uploaderType === "file"
-        ? this.uploadConfig.fileChannel
-        : this.uploadConfig.channel;
-    },
-
-    uploadArguments() {
-      return {
-        type: this.uploaderType,
-        channel: this.channel
-      };
-    }
-  },
-  methods: {
-    init(){
-      try {
-        this.getChunkUploadConfig().then(res => {
-        this.uploadConfig = { ...res };
-        this.headers = {
-          Authorization: "bearer " + this.uploadConfig.token
-        };
-          this.setAxios();
-        });
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    /** ----- uploader options config start ----- */
-
-    /**
-     * 上传参数转换
-     */
-    handleProcessParams(params, file) {
-      let res = {
-        channel: this.channel,
-        md5: file.uniqueIdentifier,
-        name: params.filename,
-        chunk: params.chunkNumber - 1,
-        chunks: params.totalChunks,
-        chunkSize: params.currentChunkSize
-      };
-      count++;
-      return res || params;
-    },
-
-    /**
-     * 获取请求头
-     */
-    handleProcessHeaders() {
-      return {
-        Authorization: "bearer " + this.uploadConfig.token
-      };
-    },
-
-    /**
-     * 获取分片上传url
-     */
-    handleGetTargetUrl(file) {
-      return this?.uploadConfig?.partFileUpload || "";
-    },
-
-    /**
-     * 格式化上传剩余时间
-     */
-    parseTimeRemaining(timeRemaining, parsedTimeRemaining) {
-      return parsedTimeRemaining
-        .replace(/\syears?/, "年")
-        .replace(/\days?/, "天")
-        .replace(/\shours?/, "小时")
-        .replace(/\sminutes?/, "分钟")
-        .replace(/\sseconds?/, "秒");
-    },
-
-    checkChunkUploadedByResponse(chunk, message) {
-      console.log(count);
-      count++;
-      let objMessage = JSON.parse(message);
-      if (objMessage.success && objMessage.code == "00000") {
-        return true;
-      }
-      return false;
-    },
-    /** ----- uploader options config end ----- */
-
-    /** ----- req s ----- */
-
-    /**
-     * 初始化接口,获取分片上传 url token md5
-     */
-    // TODO:
-    fetchConfig() {
-      return axios
-        .get("hospitalUpload/getUploadConfigNew")
-        .then(({ data }) => {
-          /**
-         *  channel: "HW_VIDEO" 视频渠道
-            checkFileMd5Exist: "http://192.168.2.105:12060/storage/checkFileMd5Exist" 校验分片
-            fileChannel: "ALI_OSS" 文件上传渠道
-            md5: "0e22a1d7ba3540e3b631a31ace093cc8"
-            objectName: "5425/234667/20210203"
-            partFileMerge: "http://192.168.2.105:12060/storage/partFileMerge" 合并接口
-            partFileUpload: "http://192.168.2.105:12060/storage/partFileUpload" 分片上传接口
-            token: "d012a22a9f284801b1bed4c20f3715de" token
-         */
-          return Object.assign({}, { ...data.map });
-        })
-        .catch(err => {
-          console.log(err);
-          this.$message.error("获取上传配置失败");
-        });
-      // return request({
-      //   url: "/video/getUploadConfig"
-      // }).then(res => {
-      //   return Object.assign({}, { ...res.data });
-      // });
-    },
-
-    /**
-     * 一键上传
-     */
-    handleStartUpload() {
-      let len = this?.configList?.length || 0;
-      if (len == 0) {
-        this.$message.info("请选择文件");
-        return;
-      }
-      this.$nextTick(() => {
-        // upload api 调用没用
-        // this.uploader.upload();
-        this.configList.forEach(f => {
-          let o = f.file_upload_status || {};
-          if (o.status) {
-            // f.resume();
-            this.statusSet(f, "uploading");
-            this.computeMD5(f);
-          }
-        });
-      });
-    },
-
-    /**
-     * 读取到文件
-     */
-    async onFileAdded(file) {
-      let sizeFlag = this.checkSize(file);
-      if (this.handleCheckExt(this.propsCategoryMap, file) || this.checkMaxLength() || sizeFlag) {
-        file.ignored = true;
-        return;
-      }
-      file.file_upload_status = ""; // 文件上传状态
-      this.statusSet(file, "init");
-      file.crm_upload_config = { ...file }; // 视频初始化信息
-      this.configList.push(file);
-      this.statusSet(file, "ready");
-      // 自动上传
-      if (this.autoStart) {
-        // 暂停
-        file.pause();
-        this.computeMD5(file);
-      }
-    },
-
-    checkSize(file) {
-      const max_size = this?.max_size || "";
-      if (!max_size) return false;
-      let isLt = file.size / 1024 < +max_size;
-      if (!isLt) {
-        this.$message.error(`附件大小超过了${this.curMaxSize(max_size)}`);
-      }
-      return !isLt;
-    },
-
-    curMaxSize(curMax) {
-      let useMax;
-      if (curMax) {
-        useMax = +(+curMax).toFixed(2);
-      } else {
-        return useMax;
-      }
-      if (useMax < 1024) {
-        return useMax + "KB";
-      } else if (useMax < 1024 * 1024) {
-        return (useMax / 1024).toFixed(2) + "MB";
-      } else if (useMax < 1024 * 1024 * 1024) {
-        return (useMax / (1024 * 1024)).toFixed(2) + "GB";
-      }
-    },
-
-    handleCheckExt(map, file) {
-      let flag = false;
-      if (map) {
-        // getExtension() 得到小写的后缀
-        if (map.includes("*")) {
-          return false;
-        }
-        let ext = file.getExtension();
-        if (!map.includes(ext)) {
-          this.$message.error(`不支持${ext}格式`);
-          flag = true;
-        }
-      }
-      return flag;
-    },
-
-    checkMaxLength() {
-      if (this.maxLength > 0) {
-        let defLen = this?.defaultList?.length || 0;
-        let len = this?.configList?.length || 0;
-        if (this.maxLength <= defLen + len) {
-          this.$message.error(`最多只能上传${this.maxLength}个`);
-          return true;
-        }
-      }
-      return false;
-    },
-
-    /**
-     * 进度条
-     */
-    onFileProgress() {
-      // rootFile, file, chunk
-      // console.log(
-      //   `上传中 ${file.name}，chunk：${chunk.startByte /
-      //     1024 /
-      //     1024} ~ ${chunk.endByte / 1024 / 1024}`
-      // );
-    },
-
-    /**
-     * 所有分片上传成功
-     */
-    onFileSuccess(rootFile, file, response) {
-      let res = JSON.parse(response); // "{"success":true,"msg":"成功","code":"00000"}"
-
-      // 服务器自定义的错误（即虽返回200，但是是错误的情况），这种错误是Uploader无法拦截的
-      if (!res.success) {
-        // this.$message({ message: res.message, type: "error" });
-        // 文件状态设为“失败”
-        this.statusSet(file, "failed");
-        return;
-      }
-      // this.beginTimer(file);
-      this.statusSet(file, "merging");
-      this.mergeRequest(
-        {
-          md5: file.uniqueIdentifier,
-          fileName: file.name,
-          fileChunkNum: file.chunks.length
-        },
-        file
-      );
-
-      // 如果服务端返回需要合并
-      if (res.needMerge) {
-        // 文件状态设为“合并中”
-        this.statusSet(file, "merging");
-      }
-    },
-
-    /**
-     * 上传错误
-     */
-    onFileError(rootFile, file) {
-      // rootFile, file, response, chunk
-      this.statusSet(file, "failed");
-      // this.$message({
-      //   message: response,
-      //   type: "error"
-      // });
-    },
-
-    /** 暂时不用
-     * 计算md5，实现断点续传及秒传
-     * @param file
-     */
-    computeMD5(file) {
-      let fileReader = new FileReader();
-      let time = new Date().getTime();
-      let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
-      let currentChunk = 0;
-      const chunkSize = 10 * 1024 * 1000;
-      let chunks = Math.ceil(file.size / chunkSize);
-      let spark = new SparkMD5.ArrayBuffer();
-
-      // 文件状态设为"计算MD5"
-      this.statusSet(file, "md5");
-      file.pause();
-
-      loadNext();
-
-      fileReader.onload = e => {
-        spark.append(e.target.result);
-
-        if (currentChunk < chunks) {
-          currentChunk++;
-          loadNext();
-        } else {
-          let md5 = spark.end();
-          this.computeMD5Success(md5, file);
-        }
-      };
-
-      fileReader.onerror = function() {
-        console.warn(`文件${file.name}读取出错，请检查该文件`);
-        file.cancel();
-      };
-
-      function loadNext() {
-        let start = currentChunk * chunkSize;
-        let end = start + chunkSize >= file.size ? file.size : start + chunkSize;
-
-        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
-      }
-    },
-
-    /**
-     * 展示不用
-     */
-    async computeMD5Success(md5, file) {
-      try {
-        const verifyData = await this.verifyUpload(file.name, md5, file);
-
-        if (verifyData.code == "00000") {
-          const { data } = verifyData || {};
-
-          /** data ex
-           * md5: "84c3312c13d15d672704a10a453a8faf"
-           * path: "https://cdn.cnhis.cc/opendoc/5575/1298910791417647105/20201013/db2b30c2447b4c2e96101c88ddac1f38.mp4"
-           * presence: true
-           */
-
-          if (data.presence) {
-            // 已上传过的,直接修改为完成的状态
-            this.statusSet(file, "complete");
-            this.$set(file, "crm_chkuns_complete_status", "complete");
-            this.$set(
-              file,
-              "crm_uploade_resInfo",
-              { url: data.path, name: file.name, size: file.size } || {}
-            );
-            return;
-          }
-        }
-
-        file.uniqueIdentifier = md5;
-        this.statusSet(file, "uploading");
-        file.resume();
-      } catch (error) {
-        console.log(error, "chunk-upload-computeMD5Success");
-      }
-    },
-
-    close() {
-      this.uploader.cancel();
-    },
-
-    /**
-     * 自定义的状态
-     * @param file
-     * @param status
-     */
-    statusSet(file, status) {
-      let statusMap = {
-        init: {
-          status: "init",
-          text: "初始化中",
-          bgc: "#fff"
-        },
-        md5: {
-          status: "md5",
-          text: "校验MD5",
-          bgc: "#fff"
-        },
-        ready: {
-          status: "ready",
-          text: "初始化完成",
-          bgc: "#fff"
-        },
-        merging: {
-          status: "merging",
-          text: "合并中",
-          bgc: "#e2eeff"
-        },
-        uploading: {
-          status: "uploading",
-          text: "上传中",
-          bgc: "#e2eeff"
-        },
-        transcoding: {
-          status: "transcoding",
-          text: "转码中",
-          bgc: "#e2eeff"
-        },
-        paused: {
-          status: "paused",
-          text: "暂停",
-          bgc: "#e2eeff"
-        },
-        failed: {
-          status: "failed",
-          text: "上传失败",
-          bgc: "#e2eeff"
-        },
-        complete: {
-          status: "complete",
-          text: "上传完成",
-          bgc: "#e2eeff"
-        }
-      };
-      if (status === "failed") {
-        file.pause && file.pause();
-      }
-      this.$set(file, "file_upload_status", { ...statusMap[status] });
-    },
-
-    /**
-     * 格式化进度跳
-     */
-    formatedProgress(v, file) {
-      if (file.crm_chkuns_complete_status == "complete") {
-        return 100;
-      }
-      return parseInt(v * 100, 10);
-    },
-
-    /**
-     * 删除
-     */
-    handleRemove(file) {
-      file.cancel();
-      let id = file.id;
-      this.configList = this.configList.filter(c => c.id !== id);
-    },
-
-    /**
-     * 上传状态
-     */
-    getUploadShowStatus(file, key = "text") {
-      let status = file?.file_upload_status || {};
-      return status[key];
-    },
-
-    /**
-     * 组件销毁后
-     */
-    handleOnDestroyed() {},
-
-    handleGetSumbitList() {
-      let len = this?.configList?.length || 0;
-      let list = [];
-      if (len > 0) {
-        this.configList.forEach(file => {
-          if (file.crm_chkuns_complete_status == "complete")
-            list.push({ size: file.size, ...file.crm_uploade_resInfo });
-        });
-      }
-      this.$emit("getSumbitList", list);
-    },
-
-    confirm() {
-      const { configList } = this;
-      let len = configList?.length || 0;
-      if (len === 0) {
-        this.$message.info("请选择文件上传");
-        return;
-      }
-      let list = configList.filter(
-        v => !["complete", "failed"].includes(v.file_upload_status.status)
-      );
-
-      if (list.length > 0) {
-        this.$message.info("请上传文件或者等待文件上传完成！");
-        return;
-      }
-      this.handleGetSumbitList();
-      this.cancel();
-    },
-
-    cancel() {
-      this.close();
-      this.handleOnDestroyed();
-      this.configList = [];
-      this.$emit("update:propsVisible", false);
-    },
-
-    // 文件上传之前的校验： 校验文件是否已存在
-    verifyUpload(fileName, fileHash, file) {
-      let url = this.uploadConfig.checkFileMd5Exist;
-      return new Promise((resolve, reject) => {
-        const obj = {
-          md5: fileHash,
-          fileName,
-          ...this.uploadArguments
-        };
-        instance
-          .get(url, { params: obj })
-          .then(res => {
-            resolve(res.data);
-          })
-          .catch(err => {
-            this.statusSet(file, "failed");
-            console.log("verifyUpload -> err", err);
-          });
-      });
-    },
-
-    // 通知服务端合并切片
-    mergeRequest(data, file) {
-      return new Promise((resolve, reject) => {
-        const obj = {
-          ...data,
-          ...this.uploadArguments
-        };
-
-        instance
-          .post(this.uploadConfig.partFileMerge, obj, {
-            timeout: 0
-          })
-          .then(({ data }) => {
-            // 清除storage
-            if (data.code === "00000") {
-              // this.$message.success('上传成功');
-              // 判断是否所有都成功上传
-              this.statusSet(file, "complete");
-              if (this.$refs.uploader) {
-                let resData = data?.data || {};
-                this.$refs.uploader.fileList.forEach(v => {
-                  if (v.uniqueIdentifier == file.uniqueIdentifier) {
-                    this.$set(v, "crm_chkuns_complete_status", "complete");
-                    this.$set(v, "crm_uploade_resInfo", {
-                      url: resData.path || resData.url,
-                      name: file.name,
-                      size: file.size,
-                      ...resData
-                    });
-                  }
-                });
-              }
-              resolve();
-            } else {
-              this.$message.error("上传失败");
-              // 文件块数量不对，清除缓存
-              resolve();
-            }
-          })
-          .catch(err => {
-            console.log("mergeRequest -> err", err);
-            reject();
-          });
-      });
-    },
-
-    setAxios() {
-      // if (!this.headers) return;
-      for (const i in this.headers) {
-        instance.defaults.headers.common[i] = this.headers[i];
-      }
-
-      // 是否携带cookie
-      // if (this.withCredentials) {
-      instance.defaults.withCredentials = this.withCredentials;
-      // }
-
-      // 设置baseUrl
-      // if (this.baseUrl) {
-      //   instance.defaults.baseURL = "http://192.168.20.113:12060" || this.baseUrl;
-      // }
-
-      // 设置切片大小
-      // chunkSize = this.chunkSize;
-    },
-
-    hanldeDraggerBtnClick() {
-      const uploadBtn = this?.$refs?.uploadBtn || false;
-      let input = uploadBtn?.$el?.querySelector("input") || false;
-      if (input) {
-        input.click();
-      }
-    },
-
-    /**
-     * 处理请求结果
-     */
-
-    processResponse(response, cb, file, Chunk) {
-      cb(null, response);
-
-      //
-      // try {
-      //   let responseObj = response && JSON.parse(response);
-      //   if (!responseObj.success || responseObj.code != "00000") {
-      //     file.pause();
-      //     this.statusSet(file, "failed");
-      //     this.$message.error(responseObj.msg || "文件上传失败，请重新上传");
-      //   }
-      //   cb(null, response);
-      // } catch (error) {
-      //   console.log(error);
-      //   this.statusSet(file, "failed");
-      //   file.pause();
-      //   this.$message.error("文件上传失败，请重新上传");
-      // }
-    }
-
-    // error(msg) {
-    //   this.$notify({
-    //     title: "错误",
-    //     message: msg,
-    //     type: "error",
-    //     duration: 2000
-    //   });
-    // }
-  },
-  watch: {},
-  destroyed() {
-    // Bus.$off("openUploader");
-    this.handleOnDestroyed();
-  },
-  components: {
-    Uploader,
-    UploaderBtn,
-    UploaderDrop,
-    UploaderUnsupport,
-    UploaderList,
-    // UploaderFiles,
-    UploaderFile,
-    [Progress.name]: Progress,
-    [Button.name]: Button,
-    [Icon.name]: Icon
-  }
-};
-</script>
-
-<style scoped lang="less">
-.chunk-upload-container {
-  // position: fixed;
-  // z-index: 20;
-  // right: 15px;
-  // bottom: 15px;
-  // padding: 15px;
-  background-color: #fff;
-
-  .uploader-app {
-    // width: 520px;
-    min-width: 250px;
-  }
-
-  .upload-btn {
-    padding: 20px 0px;
-    .mgl-10 {
-      margin-left: 10px;
-    }
-  }
-
-  .no-file {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 16px;
-  }
-
-  /deep/.uploader-file-icon {
-    &:before {
-      content: "" !important;
-    }
-  }
-
-  /deep/.uploader-file-actions > span {
-    margin-right: 6px;
-  }
-}
-
-.file-list-conatiner {
-  background-color: #fff;
-  // min-height: 100px;
-  height: 300px;
-  margin-top: 20px;
-  overflow: hidden;
-  overflow-y: auto;
-  // border: 1px solid #d5d5d5;
-  // border-radius: 4px;
-
-  /deep/ .uploader-file {
-    height: auto;
-    line-height: initial;
-    border-bottom: none;
-  }
-}
-
-.c-file-container {
-  .c-f-item {
-    display: flex;
-
-    &-icon {
-      width: 50px;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    &-info {
-      flex: 1;
-      line-height: 20px;
-
-      &-title {
-        line-height: 24px;
-        .title {
-          font-size: 14px;
-          font-family: PingFangSC-Medium, PingFang SC;
-          font-weight: 500;
-          color: rgba(0, 0, 0, 0.85);
-        }
-        .size {
-          font-size: 12px;
-          color: #9d9d9d;
-        }
-      }
-
-      &-time {
-        font-size: 12px;
-        color: #9d9d9d;
-      }
-    }
-
-    &-btn {
-      width: 100px;
-      line-height: 40px;
-      i {
-        padding: 0 5px;
-      }
-    }
-  }
-  /deep/ .ant-progress {
-    line-height: 1;
-  }
-}
-
-.file-boder-bottom {
-  border-bottom: 1px solid #d5d5d5;
-}
-
-.drap-container {
-  position: relative;
-  padding-top: 45px;
-  overflow: hidden;
-  border-radius: 4px;
-  border: 1px dashed #5585f5;
-  background-color: #f9f9f9;
-  text-align: center;
-  height: 180px;
-  line-height: 1.5;
-  color: #5585f5;
-  // margin-bottom: 20px;
-  cursor: pointer;
-  i {
-    font-size: 56px;
-    margin-bottom: 20px;
-  }
-}
-</style>
-
-<style lang="less">
-.chunk-upload-container {
-  div.uploader-drop {
-    padding: 0;
-    border: none;
-  }
-}
-</style>
+<template>
+  <div class="chunk-upload-container">
+    <!-- 上传 -->
+    <uploader
+      ref="uploader"
+      :options="options"
+      :autoStart="autoStart"
+      @file-added="onFileAdded"
+      @file-success="onFileSuccess"
+      @file-progress="onFileProgress"
+      @file-error="onFileError"
+      class="uploader-app"
+    >
+      <uploader-unsupport></uploader-unsupport>
+
+      <uploader-drop>
+        <div class="drap-container dragger-btn" @click="hanldeDraggerBtnClick">
+          <a-icon type="folder-add" />
+          <p>点击或将文件拖拽到这里上传</p>
+        </div>
+      </uploader-drop>
+
+      <uploader-list>
+        <div slot-scope="props" class="file-list-conatiner">
+          <ul class="file-list">
+            <li v-for="file in props.fileList" :key="file.id">
+              <uploader-file :class="'file_' + file.id" ref="files" :file="file" :list="true">
+                <div
+                  slot-scope="props"
+                  class="c-file-container"
+                  :class="{
+                    'file-boder-bottom': ['complete', 'failed'].includes(
+                      getUploadShowStatus(file, 'status')
+                    )
+                  }"
+                >
+                  <!-- icon -->
+                  <div class="c-f-item">
+                    <div class="c-f-item-icon">
+                      <a-icon type="paper-clip" style="color:#5585F5;" />
+                    </div>
+                    <div class="c-f-item-info">
+                      <!-- <a-spin
+                            :spinning="
+                              ['uploading', 'merging'].includes(getUploadShowStatus(file, 'status'))
+                            "
+                          > -->
+                      <div class="c-f-item-info-title">
+                        <span class="title">
+                          {{ file.name }}
+                        </span>
+                        <span class="size"> ({{ props.formatedSize }}) </span>
+                      </div>
+                      <div class="c-f-item-info-time">
+                        <span>
+                          {{ props.formatedTimeRemaining }}
+                        </span>
+                        <span>
+                          {{ getUploadShowStatus(file, "text") }}
+                        </span>
+                      </div>
+                      <!-- </a-spin> -->
+
+                      <!-- {{ props.progress }} -->
+                    </div>
+                    <div class="c-f-item-btn">
+                      <!-- <a-icon type="redo" @click="file.resume()" />
+                      <a-icon type="pause" @click="file.pause()" /> -->
+                      <a-icon type="close" @click="handleRemove(file)" />
+
+                      <!-- .pause() 暂停上窜文件。
+                          .resume() 继续上传文件。
+                          .cancel() 取消上传且从文件列表中移除。
+                          .retry() 重新上传文件。 -->
+                    </div>
+                  </div>
+
+                  <a-progress
+                    :percent="formatedProgress(props.progress, file)"
+                    :show-info="false"
+                    :strokeWidth="2"
+                  />
+                </div>
+              </uploader-file>
+            </li>
+            <!-- <div class="no-file" v-if="!props.fileList.length">
+                  <i class="iconfont icon-empty-file"></i> 暂无待上传文件
+                </div> -->
+          </ul>
+        </div>
+      </uploader-list>
+
+      <div class="upload-btn">
+        <uploader-btn v-show="false" :attrs="btnAttrs" ref="uploadBtn">
+          <span>
+            上传新文件
+          </span></uploader-btn
+        >
+        <a-button type="primary" class="mgl-10" @click="handleStartUpload">开始上传</a-button>
+      </div>
+    </uploader>
+  </div>
+</template>
+
+<script>
+/**
+ * getChunkUploadConfig()
+ */
+import {
+  Uploader,
+  UploaderBtn,
+  UploaderDrop,
+  UploaderUnsupport,
+  UploaderList,
+  // UploaderFiles,
+  UploaderFile
+} from "vue-simple-uploader";
+import SparkMD5 from "spark-md5";
+import axios, { CancelToken } from "axios";
+import {Progress,Button,Icon} from 'ant-design-vue'
+var instance = axios.create({});
+const chunkSize = 3 * 1024 * 1024;
+let count = 1;
+export default {
+  name: "chunkUploadCom",
+  props: {
+    propsVisible: {
+      type: Boolean,
+      default: false
+    },
+    propsCategoryMap: {
+      type: String,
+      default: ""
+    },
+    max_size: {
+      type: String,
+      default: ""
+    },
+    maxLength: {
+      type: Number,
+      default: 0
+    },
+    defaultList: {
+      type: Array,
+      default: () => []
+    },
+    // 临时自测使用
+    // uploadArguments: {
+    //   type: Object,
+    //   default: () => {
+    //     return {
+    //       type: "video"
+    //     };
+    //   }
+    // },
+
+    uploaderType: {
+      type: String,
+      default: "video"
+    },
+
+    getChunkUploadConfig:{
+      type: Function,
+      default: () => Promise.resolve({})
+    }
+  },
+  data() {
+    return {
+      spinning: false,
+      uploadConfig: {},
+      options: {
+        target: this.handleGetTargetUrl,
+        chunkSize: chunkSize,
+        fileParameterName: "file",
+        maxChunkRetries: 3, // 上载失败之前，块的最大重试次数
+        simultaneousUploads: 3, // 分片同时上传数
+        prioritizeFirstAndLastChunk: true,
+        forceChunkSize: true,
+        testChunks: false, // 是否开启服务器分片校验
+        // 服务器分片校验函数，秒传及断点续传基础
+        // checkChunkUploadedByResponse: this.checkChunkUploadedByResponse,
+        headers: this.handleProcessHeaders,
+        query() {},
+        processParams: this.handleProcessParams,
+        parseTimeRemaining: this.parseTimeRemaining,
+        processResponse: this.processResponse
+      },
+      attrs: {},
+      collapse: false,
+
+      configList: [],
+      share: 1, // 是否共享 0私有  1共享
+      baseUrl: "http://192.168.20.113:12060",
+      headers: {
+        Authorization: "bearer " + "d012a22a9f284801b1bed4c20f3715de"
+      },
+      withCredentials: false
+    };
+  },
+  created() {
+    this.init()
+  },
+  mounted() {},
+  computed: {
+    // Uploader实例
+    uploader() {
+      return this.$refs.uploader.uploader;
+    },
+    // 读取到文件自动上传
+    autoStart() {
+      return false;
+    },
+    visible: {
+      get() {
+        return this.propsVisible;
+      }
+    },
+    btnAttrs() {
+      return {
+        accept: this.propsCategoryMap
+      };
+    },
+
+    uploadArgumentsObj() {
+      return { ...this.uploadArguments, share: this.share };
+    },
+
+    channel() {
+      if (Object.keys(this.uploadConfig || {}).length === 0) {
+        return undefined;
+      }
+      return this.uploaderType === "file"
+        ? this.uploadConfig.fileChannel
+        : this.uploadConfig.channel;
+    },
+
+    uploadArguments() {
+      return {
+        type: this.uploaderType,
+        channel: this.channel
+      };
+    }
+  },
+  methods: {
+    init(){
+      try {
+        this.getChunkUploadConfig().then(res => {
+        this.uploadConfig = { ...res };
+        this.headers = {
+          Authorization: "bearer " + this.uploadConfig.token
+        };
+          this.setAxios();
+        });
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    /** ----- uploader options config start ----- */
+
+    /**
+     * 上传参数转换
+     */
+    handleProcessParams(params, file) {
+      let res = {
+        channel: this.channel,
+        md5: file.uniqueIdentifier,
+        name: params.filename,
+        chunk: params.chunkNumber - 1,
+        chunks: params.totalChunks,
+        chunkSize: params.currentChunkSize
+      };
+      count++;
+      return res || params;
+    },
+
+    /**
+     * 获取请求头
+     */
+    handleProcessHeaders() {
+      return {
+        Authorization: "bearer " + this.uploadConfig.token
+      };
+    },
+
+    /**
+     * 获取分片上传url
+     */
+    handleGetTargetUrl(file) {
+      return this?.uploadConfig?.partFileUpload || "";
+    },
+
+    /**
+     * 格式化上传剩余时间
+     */
+    parseTimeRemaining(timeRemaining, parsedTimeRemaining) {
+      return parsedTimeRemaining
+        .replace(/\syears?/, "年")
+        .replace(/\days?/, "天")
+        .replace(/\shours?/, "小时")
+        .replace(/\sminutes?/, "分钟")
+        .replace(/\sseconds?/, "秒");
+    },
+
+    checkChunkUploadedByResponse(chunk, message) {
+      console.log(count);
+      count++;
+      let objMessage = JSON.parse(message);
+      if (objMessage.success && objMessage.code == "00000") {
+        return true;
+      }
+      return false;
+    },
+    /** ----- uploader options config end ----- */
+
+    /** ----- req s ----- */
+
+    /**
+     * 初始化接口,获取分片上传 url token md5
+     */
+    // TODO:
+    fetchConfig() {
+      return axios
+        .get("hospitalUpload/getUploadConfigNew")
+        .then(({ data }) => {
+          /**
+         *  channel: "HW_VIDEO" 视频渠道
+            checkFileMd5Exist: "http://192.168.2.105:12060/storage/checkFileMd5Exist" 校验分片
+            fileChannel: "ALI_OSS" 文件上传渠道
+            md5: "0e22a1d7ba3540e3b631a31ace093cc8"
+            objectName: "5425/234667/20210203"
+            partFileMerge: "http://192.168.2.105:12060/storage/partFileMerge" 合并接口
+            partFileUpload: "http://192.168.2.105:12060/storage/partFileUpload" 分片上传接口
+            token: "d012a22a9f284801b1bed4c20f3715de" token
+         */
+          return Object.assign({}, { ...data.map });
+        })
+        .catch(err => {
+          console.log(err);
+          this.$message.error("获取上传配置失败");
+        });
+      // return request({
+      //   url: "/video/getUploadConfig"
+      // }).then(res => {
+      //   return Object.assign({}, { ...res.data });
+      // });
+    },
+
+    /**
+     * 一键上传
+     */
+    handleStartUpload() {
+      let len = this?.configList?.length || 0;
+      if (len == 0) {
+        this.$message.info("请选择文件");
+        return;
+      }
+      this.$nextTick(() => {
+        // upload api 调用没用
+        // this.uploader.upload();
+        this.configList.forEach(f => {
+          let o = f.file_upload_status || {};
+          if (o.status) {
+            // f.resume();
+            this.statusSet(f, "uploading");
+            this.computeMD5(f);
+          }
+        });
+      });
+    },
+
+    /**
+     * 读取到文件
+     */
+    async onFileAdded(file) {
+      let sizeFlag = this.checkSize(file);
+      if (this.handleCheckExt(this.propsCategoryMap, file) || this.checkMaxLength() || sizeFlag) {
+        file.ignored = true;
+        return;
+      }
+      file.file_upload_status = ""; // 文件上传状态
+      this.statusSet(file, "init");
+      file.crm_upload_config = { ...file }; // 视频初始化信息
+      this.configList.push(file);
+      this.statusSet(file, "ready");
+      // 自动上传
+      if (this.autoStart) {
+        // 暂停
+        file.pause();
+        this.computeMD5(file);
+      }
+    },
+
+    checkSize(file) {
+      const max_size = this?.max_size || "";
+      if (!max_size) return false;
+      let isLt = file.size / 1024 < +max_size;
+      if (!isLt) {
+        this.$message.error(`附件大小超过了${this.curMaxSize(max_size)}`);
+      }
+      return !isLt;
+    },
+
+    curMaxSize(curMax) {
+      let useMax;
+      if (curMax) {
+        useMax = +(+curMax).toFixed(2);
+      } else {
+        return useMax;
+      }
+      if (useMax < 1024) {
+        return useMax + "KB";
+      } else if (useMax < 1024 * 1024) {
+        return (useMax / 1024).toFixed(2) + "MB";
+      } else if (useMax < 1024 * 1024 * 1024) {
+        return (useMax / (1024 * 1024)).toFixed(2) + "GB";
+      }
+    },
+
+    handleCheckExt(map, file) {
+      let flag = false;
+      if (map) {
+        // getExtension() 得到小写的后缀
+        if (map.includes("*")) {
+          return false;
+        }
+        let ext = file.getExtension();
+        if (!map.includes(ext)) {
+          this.$message.error(`不支持${ext}格式`);
+          flag = true;
+        }
+      }
+      return flag;
+    },
+
+    checkMaxLength() {
+      if (this.maxLength > 0) {
+        let defLen = this?.defaultList?.length || 0;
+        let len = this?.configList?.length || 0;
+        if (this.maxLength <= defLen + len) {
+          this.$message.error(`最多只能上传${this.maxLength}个`);
+          return true;
+        }
+      }
+      return false;
+    },
+
+    /**
+     * 进度条
+     */
+    onFileProgress() {
+      // rootFile, file, chunk
+      // console.log(
+      //   `上传中 ${file.name}，chunk：${chunk.startByte /
+      //     1024 /
+      //     1024} ~ ${chunk.endByte / 1024 / 1024}`
+      // );
+    },
+
+    /**
+     * 所有分片上传成功
+     */
+    onFileSuccess(rootFile, file, response) {
+      let res = JSON.parse(response); // "{"success":true,"msg":"成功","code":"00000"}"
+
+      // 服务器自定义的错误（即虽返回200，但是是错误的情况），这种错误是Uploader无法拦截的
+      if (!res.success) {
+        // this.$message({ message: res.message, type: "error" });
+        // 文件状态设为“失败”
+        this.statusSet(file, "failed");
+        return;
+      }
+      // this.beginTimer(file);
+      this.statusSet(file, "merging");
+      this.mergeRequest(
+        {
+          md5: file.uniqueIdentifier,
+          fileName: file.name,
+          fileChunkNum: file.chunks.length
+        },
+        file
+      );
+
+      // 如果服务端返回需要合并
+      if (res.needMerge) {
+        // 文件状态设为“合并中”
+        this.statusSet(file, "merging");
+      }
+    },
+
+    /**
+     * 上传错误
+     */
+    onFileError(rootFile, file) {
+      // rootFile, file, response, chunk
+      this.statusSet(file, "failed");
+      // this.$message({
+      //   message: response,
+      //   type: "error"
+      // });
+    },
+
+    /** 暂时不用
+     * 计算md5，实现断点续传及秒传
+     * @param file
+     */
+    computeMD5(file) {
+      let fileReader = new FileReader();
+      let time = new Date().getTime();
+      let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
+      let currentChunk = 0;
+      const chunkSize = 10 * 1024 * 1000;
+      let chunks = Math.ceil(file.size / chunkSize);
+      let spark = new SparkMD5.ArrayBuffer();
+
+      // 文件状态设为"计算MD5"
+      this.statusSet(file, "md5");
+      file.pause();
+
+      loadNext();
+
+      fileReader.onload = e => {
+        spark.append(e.target.result);
+
+        if (currentChunk < chunks) {
+          currentChunk++;
+          loadNext();
+        } else {
+          let md5 = spark.end();
+          this.computeMD5Success(md5, file);
+        }
+      };
+
+      fileReader.onerror = function() {
+        console.warn(`文件${file.name}读取出错，请检查该文件`);
+        file.cancel();
+      };
+
+      function loadNext() {
+        let start = currentChunk * chunkSize;
+        let end = start + chunkSize >= file.size ? file.size : start + chunkSize;
+
+        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
+      }
+    },
+
+    /**
+     * 展示不用
+     */
+    async computeMD5Success(md5, file) {
+      try {
+        const verifyData = await this.verifyUpload(file.name, md5, file);
+
+        if (verifyData.code == "00000") {
+          const { data } = verifyData || {};
+
+          /** data ex
+           * md5: "84c3312c13d15d672704a10a453a8faf"
+           * path: "https://cdn.cnhis.cc/opendoc/5575/1298910791417647105/20201013/db2b30c2447b4c2e96101c88ddac1f38.mp4"
+           * presence: true
+           */
+
+          if (data.presence) {
+            // 已上传过的,直接修改为完成的状态
+            this.statusSet(file, "complete");
+            this.$set(file, "crm_chkuns_complete_status", "complete");
+            this.$set(
+              file,
+              "crm_uploade_resInfo",
+              { url: data.path, name: file.name, size: file.size } || {}
+            );
+            return;
+          }
+        }
+
+        file.uniqueIdentifier = md5;
+        this.statusSet(file, "uploading");
+        file.resume();
+      } catch (error) {
+        console.log(error, "chunk-upload-computeMD5Success");
+      }
+    },
+
+    close() {
+      this.uploader.cancel();
+    },
+
+    /**
+     * 自定义的状态
+     * @param file
+     * @param status
+     */
+    statusSet(file, status) {
+      let statusMap = {
+        init: {
+          status: "init",
+          text: "初始化中",
+          bgc: "#fff"
+        },
+        md5: {
+          status: "md5",
+          text: "校验MD5",
+          bgc: "#fff"
+        },
+        ready: {
+          status: "ready",
+          text: "初始化完成",
+          bgc: "#fff"
+        },
+        merging: {
+          status: "merging",
+          text: "合并中",
+          bgc: "#e2eeff"
+        },
+        uploading: {
+          status: "uploading",
+          text: "上传中",
+          bgc: "#e2eeff"
+        },
+        transcoding: {
+          status: "transcoding",
+          text: "转码中",
+          bgc: "#e2eeff"
+        },
+        paused: {
+          status: "paused",
+          text: "暂停",
+          bgc: "#e2eeff"
+        },
+        failed: {
+          status: "failed",
+          text: "上传失败",
+          bgc: "#e2eeff"
+        },
+        complete: {
+          status: "complete",
+          text: "上传完成",
+          bgc: "#e2eeff"
+        }
+      };
+      if (status === "failed") {
+        file.pause && file.pause();
+      }
+      this.$set(file, "file_upload_status", { ...statusMap[status] });
+    },
+
+    /**
+     * 格式化进度跳
+     */
+    formatedProgress(v, file) {
+      if (file.crm_chkuns_complete_status == "complete") {
+        return 100;
+      }
+      return parseInt(v * 100, 10);
+    },
+
+    /**
+     * 删除
+     */
+    handleRemove(file) {
+      file.cancel();
+      let id = file.id;
+      this.configList = this.configList.filter(c => c.id !== id);
+    },
+
+    /**
+     * 上传状态
+     */
+    getUploadShowStatus(file, key = "text") {
+      let status = file?.file_upload_status || {};
+      return status[key];
+    },
+
+    /**
+     * 组件销毁后
+     */
+    handleOnDestroyed() {},
+
+    handleGetSumbitList() {
+      let len = this?.configList?.length || 0;
+      let list = [];
+      if (len > 0) {
+        this.configList.forEach(file => {
+          if (file.crm_chkuns_complete_status == "complete")
+            list.push({ size: file.size, ...file.crm_uploade_resInfo });
+        });
+      }
+      this.$emit("getSumbitList", list);
+    },
+
+    confirm() {
+      const { configList } = this;
+      let len = configList?.length || 0;
+      if (len === 0) {
+        this.$message.info("请选择文件上传");
+        return;
+      }
+      let list = configList.filter(
+        v => !["complete", "failed"].includes(v.file_upload_status.status)
+      );
+
+      if (list.length > 0) {
+        this.$message.info("请上传文件或者等待文件上传完成！");
+        return;
+      }
+      this.handleGetSumbitList();
+      this.cancel();
+    },
+
+    cancel() {
+      this.close();
+      this.handleOnDestroyed();
+      this.configList = [];
+      this.$emit("update:propsVisible", false);
+    },
+
+    // 文件上传之前的校验： 校验文件是否已存在
+    verifyUpload(fileName, fileHash, file) {
+      let url = this.uploadConfig.checkFileMd5Exist;
+      return new Promise((resolve, reject) => {
+        const obj = {
+          md5: fileHash,
+          fileName,
+          ...this.uploadArguments
+        };
+        instance
+          .get(url, { params: obj })
+          .then(res => {
+            resolve(res.data);
+          })
+          .catch(err => {
+            this.statusSet(file, "failed");
+            console.log("verifyUpload -> err", err);
+          });
+      });
+    },
+
+    // 通知服务端合并切片
+    mergeRequest(data, file) {
+      return new Promise((resolve, reject) => {
+        const obj = {
+          ...data,
+          ...this.uploadArguments
+        };
+
+        instance
+          .post(this.uploadConfig.partFileMerge, obj, {
+            timeout: 0
+          })
+          .then(({ data }) => {
+            // 清除storage
+            if (data.code === "00000") {
+              // this.$message.success('上传成功');
+              // 判断是否所有都成功上传
+              this.statusSet(file, "complete");
+              if (this.$refs.uploader) {
+                let resData = data?.data || {};
+                this.$refs.uploader.fileList.forEach(v => {
+                  if (v.uniqueIdentifier == file.uniqueIdentifier) {
+                    this.$set(v, "crm_chkuns_complete_status", "complete");
+                    this.$set(v, "crm_uploade_resInfo", {
+                      url: resData.path || resData.url,
+                      name: file.name,
+                      size: file.size,
+                      ...resData
+                    });
+                  }
+                });
+              }
+              resolve();
+            } else {
+              this.$message.error("上传失败");
+              // 文件块数量不对，清除缓存
+              resolve();
+            }
+          })
+          .catch(err => {
+            console.log("mergeRequest -> err", err);
+            reject();
+          });
+      });
+    },
+
+    setAxios() {
+      // if (!this.headers) return;
+      for (const i in this.headers) {
+        instance.defaults.headers.common[i] = this.headers[i];
+      }
+
+      // 是否携带cookie
+      // if (this.withCredentials) {
+      instance.defaults.withCredentials = this.withCredentials;
+      // }
+
+      // 设置baseUrl
+      // if (this.baseUrl) {
+      //   instance.defaults.baseURL = "http://192.168.20.113:12060" || this.baseUrl;
+      // }
+
+      // 设置切片大小
+      // chunkSize = this.chunkSize;
+    },
+
+    hanldeDraggerBtnClick() {
+      const uploadBtn = this?.$refs?.uploadBtn || false;
+      let input = uploadBtn?.$el?.querySelector("input") || false;
+      if (input) {
+        input.click();
+      }
+    },
+
+    /**
+     * 处理请求结果
+     */
+
+    processResponse(response, cb, file, Chunk) {
+      cb(null, response);
+
+      //
+      // try {
+      //   let responseObj = response && JSON.parse(response);
+      //   if (!responseObj.success || responseObj.code != "00000") {
+      //     file.pause();
+      //     this.statusSet(file, "failed");
+      //     this.$message.error(responseObj.msg || "文件上传失败，请重新上传");
+      //   }
+      //   cb(null, response);
+      // } catch (error) {
+      //   console.log(error);
+      //   this.statusSet(file, "failed");
+      //   file.pause();
+      //   this.$message.error("文件上传失败，请重新上传");
+      // }
+    }
+
+    // error(msg) {
+    //   this.$notify({
+    //     title: "错误",
+    //     message: msg,
+    //     type: "error",
+    //     duration: 2000
+    //   });
+    // }
+  },
+  watch: {},
+  destroyed() {
+    // Bus.$off("openUploader");
+    this.handleOnDestroyed();
+  },
+  components: {
+    Uploader,
+    UploaderBtn,
+    UploaderDrop,
+    UploaderUnsupport,
+    UploaderList,
+    // UploaderFiles,
+    UploaderFile,
+    [Progress.name]: Progress,
+    [Button.name]: Button,
+    [Icon.name]: Icon
+  }
+};
+</script>
+
+<style scoped lang="less">
+.chunk-upload-container {
+  // position: fixed;
+  // z-index: 20;
+  // right: 15px;
+  // bottom: 15px;
+  // padding: 15px;
+  background-color: #fff;
+
+  .uploader-app {
+    // width: 520px;
+    min-width: 250px;
+  }
+
+  .upload-btn {
+    padding: 20px 0px;
+    .mgl-10 {
+      margin-left: 10px;
+    }
+  }
+
+  .no-file {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 16px;
+  }
+
+  /deep/.uploader-file-icon {
+    &:before {
+      content: "" !important;
+    }
+  }
+
+  /deep/.uploader-file-actions > span {
+    margin-right: 6px;
+  }
+}
+
+.file-list-conatiner {
+  background-color: #fff;
+  // min-height: 100px;
+  height: 300px;
+  margin-top: 20px;
+  overflow: hidden;
+  overflow-y: auto;
+  // border: 1px solid #d5d5d5;
+  // border-radius: 4px;
+
+  /deep/ .uploader-file {
+    height: auto;
+    line-height: initial;
+    border-bottom: none;
+  }
+}
+
+.c-file-container {
+  .c-f-item {
+    display: flex;
+
+    &-icon {
+      width: 50px;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &-info {
+      flex: 1;
+      line-height: 20px;
+
+      &-title {
+        line-height: 24px;
+        .title {
+          font-size: 14px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: rgba(0, 0, 0, 0.85);
+        }
+        .size {
+          font-size: 12px;
+          color: #9d9d9d;
+        }
+      }
+
+      &-time {
+        font-size: 12px;
+        color: #9d9d9d;
+      }
+    }
+
+    &-btn {
+      width: 100px;
+      line-height: 40px;
+      i {
+        padding: 0 5px;
+      }
+    }
+  }
+  /deep/ .ant-progress {
+    line-height: 1;
+  }
+}
+
+.file-boder-bottom {
+  border-bottom: 1px solid #d5d5d5;
+}
+
+.drap-container {
+  position: relative;
+  padding-top: 45px;
+  overflow: hidden;
+  border-radius: 4px;
+  border: 1px dashed #5585f5;
+  background-color: #f9f9f9;
+  text-align: center;
+  height: 180px;
+  line-height: 1.5;
+  color: #5585f5;
+  // margin-bottom: 20px;
+  cursor: pointer;
+  i {
+    font-size: 56px;
+    margin-bottom: 20px;
+  }
+}
+</style>
+
+<style lang="less">
+.chunk-upload-container {
+  div.uploader-drop {
+    padding: 0;
+    border: none;
+  }
+}
+</style>