唐耀东
2022-07-16 4ef06d948899e393515bd62819f4f773766f9449
src/components/FileUpload/index.vue
@@ -1,6 +1,7 @@
<template>
  <div class="upload-file">
    <el-upload
      :disabled="disabled"
      :action="uploadFileUrl"
      :before-upload="handleBeforeUpload"
      :file-list="fileList"
@@ -31,7 +32,7 @@
          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
        </el-link>
        <div class="ele-upload-list__item-content-action">
          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
          <el-link :underline="false" @click="handleDelete(index)" type="danger" :disabled="disabled">删除</el-link>
        </div>
      </li>
    </transition-group>
@@ -54,17 +55,21 @@
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
      default: 50,
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
      default: () => ["doc", "xls", "ppt", "txt", "pdf", "zip"],
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
@@ -108,6 +113,14 @@
    },
  },
  methods: {
    startLoading() {
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.8)",
      });
    },
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
@@ -125,6 +138,7 @@
          this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
          return false;
        }
        this.startLoading();
      }
      // 校检文件大小
      if (this.fileSize) {
@@ -148,6 +162,7 @@
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.$message.success("上传成功");
        this.loading.close();
        this.fileList.push({ name: res.data.fileName, url: res.data.url });
        this.$emit("input", this.listToString(this.fileList));
      } else {