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

<!--  -->
<template>
  <div class="upload">
    <el-upload
      :accept="accept"
      style="width: 300px"
      class="upload-demo"
      :action="url"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="filleNumber ? filleNumber : 1"
      :before-upload="handlebeforeUplaod"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :on-change="handleChange"
      :file-list="fileList"
    >
      <el-button size="mini" type="success">上传{{ fileTypeName }}</el-button>
      <div
        slot="tip"
        style="display: inline; padding-left: 30px"
        class="el-upload__tip"
      >
        {{ uploadName }}
      </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",
    "handleMp3Base64",
  ],
  data() {
    return {
      fileList: [],
      accept: "",
      fileTypeName: "",
      uploadName: "",
      loading: false,
    };
  },
  computed: {
    url() {
      let userInfor = getToken();
      let SessionID = "";
      let UserCode = "";
      let UserType = "";
      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(val, oldVal) {
        this.initUpload();
      },
      // 深度观察监听
      deep: true,
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initUpload();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handleChange(file, fileList) {},
    handleSuccess(response, file, fileList) {
      if (response.status == 1) {
        if (this.handleMp3Base64) {
          this.handleMp3Base64(file);
        }

        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) {
      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() {
      this.fileList = this.datafileList || [];
      let name = "只能上传";
      switch (this.uploadType) {
        case "image":
          this.accept = "image/*";
          this.fileTypeName = "图片";
          this.uploadName = name + "图片";
          break;
        case "mp3":
          this.accept = "audio/*";
          this.fileTypeName = "音频";
          this.uploadName = name + "音频";
          break;
        case "pdf":
          this.accept = ".pdf";
          this.fileTypeName = "pdf";
          this.uploadName = name + "pdf";
          break;
        case "xls":
          this.accept = ".xls,.xlsx";
          this.fileTypeName = "表格";
          this.uploadName = name + "表格";
          break;
        case "lrc":
          this.accept = ".lrc";
          this.fileTypeName = "lrc";
          this.uploadName = name + "lrc";
          break;

        default:
          this.accept = "*";
          this.fileTypeName = "文件";
          this.uploadName = "";
          break;
      }
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.zhezhao {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10000;
}
</style>