CargoOwner_WebApp/src/components/Uploader.vue

<template>
  <el-upload
    :id="uploaderId"
    drag
    multiple
    :action="actionUrl"
    list-type="picture-card"
    :on-preview="preview"
    :on-remove="remove"
    :data="params"
    :on-success="uploadSuccess"
    :file-list="fileList"
    :disabled="disabled"
    :on-exceed="onExceed"
    :limit="limit"
  >
    <div :class="['upload-plus-icon']">+</div>
    <div :class="['upload-text']">{{ uploadText }}</div>
  </el-upload>
  <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
    <el-image
      :src="dialogImageUrl"
      style="height: 100%; width: 100%"
    ></el-image>
  </el-dialog>
</template>
<script>
import { defineComponent, computed, ref, onMounted, watch } from "vue";
import { ElMessage, ElNotification } from "element-plus";
import store from "../store/index";

export default defineComponent({
  props: {
    uploaderId: {
      type: String,
      default: "uploader",
    },
    limit: {
      type: Number,
      default: 100,
    },
    params: Object,
    actionUrl: {
      type: String,
      default: store.state.uploadUrl,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    fileList: Array,
    uploadText: {
      type: String,
      default: "拖拽或点击上传",
    },
  },
  emits: ["onPreview", "onSendFileList"],
  setup(props, { emit }) {
    let dialogVisible = ref(false);
    let dialogImageUrl = ref("");
    function preview(file) {
      dialogVisible.value = true;
      dialogImageUrl.value = file.url;
    }
    function remove(file, list) {
      emit("onSendFileList", list);
    }
    function uploadSuccess(res, file, list) {
      emit("onSendFileList", list);
    }
    function onExceed(files, fileList) {
      ElMessage({
        message: `超出文件数量限制 (最大数量:${props.limit})`,
        type: "warning",
      });
    }
    watch(
      () => props.disabled,
      (a, b) => {
        changeDragVisable(!a);
      }
    );
    function changeDragVisable(boo) {
      let d = document.getElementById(props.uploaderId);
      d.childNodes[1].style.display = boo ? "inline-block" : "none";
      return;
      let a = document.getElementsByClassName("el-upload-dragger");
      let b = document.getElementsByClassName("el-upload--picture-card");
      for (let i of a) {
        i.style.display = boo ? "inline-block" : "none";
      }
      for (let i of b) {
        i.style.display = boo ? "inline-block" : "none";
      }
    }
    onMounted(() => {
      changeDragVisable(!props.disabled);
    });

    return {
      preview,
      remove,
      uploadSuccess,
      dialogVisible,
      dialogImageUrl,
      preview,
      onExceed,
    };
  },
});
</script>
<style scoped>
.upload-plus-icon {
  height: 15%;
  color: rgb(139, 147, 156);
  line-height: 100px;
  font-size: 40px;
  font-weight: 200;
}
.upload-text {
  height: 25%;
  color: rgb(139, 147, 156);
}

.dn {
  display: none;
}
:deep().el-upload-dragger {
  width: 100%;
  height: 148px !important;
}
</style>