GCLS_Page_Book_Component_NPC/src/components/Adult/common/UploadArt.vue

<!--  -->
<template>
  <div class="upload">
    <el-upload
      ref="artUpload"
      :accept="accept"
      style="width: 300px"
      class="upload-demo"
      :action="url"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="filleNumber"
      :before-upload="handlebeforeUplaod"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :on-change="handleChange"
      :show-file-list="false"
    >
      <el-button size="mini" type="success">上传{{ fileTypeName }}</el-button>
      <div
        style="display: inline; padding-left: 30px"
        slot="tip"
        class="el-upload__tip"
      >
        {{
          uploadType == "image"
            ? "只能上传图片"
            : uploadType == "mp3"
            ? "只能上传音频"
            : "只能上传pdf"
        }}
      </div>
    </el-upload>
    <!-- <div class="zhezhao" v-loading.fullscreen.lock="fullscreenLoading"></div> -->
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { getToken } from "@/utils/auth";
export default {
  components: {},
  props: [
    "uploadType",
    "filleNumber",
    "datafileList",
    "changeFillId",
    "deleteImg",
    "index",
    "uiType",
  ],
  data() {
    return {
      fileList: [],
      accept: "",
      fileTypeName: "",
      loading: false,
    };
  },
  computed: {
    url() {
      let userInfor = getToken();
      let UserCode = "",
        UserType = "",
        SessionID = "";
      if (userInfor) {
        let user = JSON.parse(getToken());
        UserCode = user.user_code;
        UserType = user.user_type;
        SessionID = user.session_id;
      }
      return (
        process.env.VUE_APP_BASE_API +
        "/GCLSFileServer/WebFileUpload?UserCode=" +
        UserCode +
        "&UserType=" +
        UserType +
        "&SessionID=" +
        SessionID +
        "&SecurityLevel=Mid"
      );
    },
  },
  watch: {
    datafileList: {
      handler: function (val, oldVal) {
        if (val != oldVal) {
          this.initUpload();
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    handleChange(file, fileList) {},
    handleSuccess(response, file, fileList) {
      if (response.status == 1) {
        this.$message.success("用户上传成功");
        this.changeFillId(file);
        this.loading.close();
      } else {
        this.fileList = [];
        this.$message.warning(response.msg);
        this.loading.close();
      }
    },
    handlebeforeUplaod(file) {
      this.fileList = [];
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleRemove(file, fileList) {
      this.changeFillId("", fileList, "", this.index);

      this.$message.success("移除成功");
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handlePreview(file) {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    initUpload() {
      this.$refs.artUpload.clearFiles();
      this.fileList = this.datafileList || [];
      let _this = this;
      switch (_this.uploadType) {
        case "image":
          _this.accept = "image/png, image/jpeg";
          _this.fileTypeName = "图片";
          return;
        case "mp3":
          _this.accept = "audio/mp3";
          _this.fileTypeName = "音频";
          return;
        case "pdf":
          _this.accept = ".pdf";
          _this.fileTypeName = "pdf";
          return;
        default:
          return null;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initUpload();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类;
.zhezhao {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10000;
}
</style>
<style lang="scss">
</style>