cnhis-design-vue 2.2.3 → 2.2.6

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

@@ -1,1006 +0,0 @@
-<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, Number],
-      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({})
-    },
-    source: { type: String, default: ""}
-  },
-  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) {
-      if(this.source === 'guage') {
-        return curMax / 1024 + 'MB';
-      }
-      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,
-          size: file.size,
-        };
-
-        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>