上传添加遮挡

zhanghua

2024-09-19 8eff378710b7074fe7241c73f3975345ffe8959b

上传添加遮挡

 src/components/drag-upload.vue

@@ -1,90 +1,97 @@
<template>
  <div class="center">
    <el-upload
      class="upload-demo"
      :action="action"
      :headers="headers"
      :data="{ staffId: staffId, orgId: orgId }"
      :on-exceed="handleExceed"
      :on-success="fileSuccess"
      :on-error="fileSuccess"
      :file-list="fileList"
      :show-file-list="true"
      multiple
      :limit="limit"
      accept=".xls,.xlsx"
      :before-upload="beforeAvatarUpload"
    >
      <slot></slot>
      <slot name="tip"></slot>
    </el-upload>
  </div>
    <div class="center" v-loading.fullscreen="successLoading">
        <el-upload
            class="upload-demo"
            :action="action"
            :headers="headers"
            :data="{ staffId: staffId, orgId: orgId }"
            :on-exceed="handleExceed"
            :on-success="fileSuccess"
            :on-error="fileSuccess"
            :file-list="fileList"
            :show-file-list="true"
            multiple
            :limit="limit"
            accept=".xls,.xlsx"
            :before-upload="beforeAvatarUpload"
        >
            <slot></slot>
            <slot name="tip"></slot>
        </el-upload>
    </div>
</template>

<script>

export default {
  data() {
    return {
      msg: "拖动上传",
      fileList: [],
      headers: {
        token: localStorage.getItem("token"),
      },
    };
  },
  props: {
    limit: {
      type: Number,
    data() {
        return {
            msg: "拖动上传",
            successLoading: false,
            fileList: [],
            headers: {
                token: localStorage.getItem("token"),
            },
        };
    },
    action: {
      type: String,
    props: {
        limit: {
            type: Number,
        },
        action: {
            type: String,
        },
        type: {
            type: String,
        },
        orgId: {
            type: Number,
        },
        staffId: {
            type: Number,
        },
    },
    type: {
      type: String,
    created() {

    },
    orgId: {
      type: Number,
    methods: {
        // 超出文件上传个数回调
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件`);
        },
        // 移除文件弹出层
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功回调
        fileSuccess(res, f, fl) {
            this.successLoading = false
            this.$emit("fileSuccess", res, this.type);
        },

        // 过滤文件
        beforeAvatarUpload(file) {
            this.successLoading = true
            let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
            const extension = fileName === "xls";
            const extension2 = fileName === "xlsx";
            if (!extension && !extension2) {

                this.successLoading = false
                this.$message({
                    message: "上传文件只能是 xls、xlsx格式!",
                    type: "warning",
                });
                return false;
            }
        },
    },
    staffId: {
      type: Number,
    },
  },
  methods: {
    // 超出文件上传个数回调
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    // 移除文件弹出层
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 上传成功回调
    fileSuccess(res, f, fl) {
      this.$emit("fileSuccess", res, this.type);
    },
    
    // 过滤文件
    beforeAvatarUpload(file) {
      let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = fileName === "xls";
      const extension2 = fileName === "xlsx";
      if (!extension && !extension2) {
        this.$message({
          message: "上传文件只能是 xls、xlsx格式!",
          type: "warning",
        });
        return false;
      }
    },
  },
  mounted() {},
    mounted() { },
};
</script>

<style lang="scss" scoped>
.center {
  float: left;
    float: left;
}

</style>