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

<!--  -->
<template>
  <div class="upload">
    <el-upload
      :accept="accept"
      class="upload-demo"
      :action="url"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :before-upload="handlebeforeUplaod"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :on-change="handleChange"
      :file-list="currentfileList"
      :show-file-list="showList"
      :limit="filleNumber"
    >
      <div class="uploadBtn">
        <img
          style="width: 24px; height: 24px"
          src="../../../assets/adult/uploadview.png"
          alt=""
        />
        上传文件
      </div>
    </el-upload>
    <!-- <div class="zhezhao" v-loading.fullscreen.lock="fullscreenLoading"></div> -->
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  components: {},
  props: [
    "uploadType",
    "filleNumber",
    "datafileList",
    "changeFillId",
    "deleteImg",
    "index",
    "uiType",
    "fileList",
    "accept",
  ],
  data() {
    return {
      currentfileList: [],
      fileTypeName: "",
      loading: false,
      showList: 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) {
        this.initUpload();
      },
      // 深度观察监听
      deep: true,
    },
    fileList(newval, oldval) {
      this.currentfileList = newval||[];
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.currentfileList = this.fileList || [];
    this.showList = this.fileList ? true : false;
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initUpload();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handleChange(file, fileList) {},
    handleSuccess(response, file, fileList) {
      if (response.status == 1) {
        response.duration = response.file_info_list[0].media_duration
          ? response.file_info_list[0].media_duration
          : 10;
        this.$message.success("用户上传成功");

        this.changeFillId(fileList, response.duration, this.index);

        this.loading.close();
      } else {
        this.fileList = [];
        this.$message.warning(response.msg);
        this.loading.close();
      }
    },
    handlebeforeUplaod(file) {
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleRemove(file, fileList) {
      console.log(fileList);
      this.changeFillId(fileList);
      this.$message.success("移除成功");
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handlePreview(file) {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${
          this.filleNumber ? this.filleNumber : 1
        } 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    initUpload() {},
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类;
.uploadBtn {
  width: 141px;
  height: 39px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  line-height: 150%;
  color: #000000;

  img {
    margin-right: 13px;
  }
}
</style>
<style lang="scss">
</style>