HM21St_Page_Manager/src/components/Upload.vue

<!--  -->
<template>
  <div class="upload">
    <el-upload
      :accept="accept"
      style="width: 500px"
      class="upload-demo"
      :action="url"
      :on-preview="handlePreview"
      multiple
      :limit="filleNumber ? filleNumber : 1"
      :before-upload="handlebeforeUpload"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :on-change="handleChange"
      :file-list="fileList"
      :before-remove="beforeRemove"
      :on-remove="handleRemove"
      :show-file-list="showList?false:true"
    >
      
      <el-button size="mini" type="primary">
        <svg-icon icon-class="upload"></svg-icon>
        上传
      </el-button>
      <div
        slot="tip"
        class="el-upload__tip"
      >
        {{ tips || uploadTip }}
      </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",
    "fileName",
    "showList",
    "tips"
  ],
  data() {
    return {
      fileList: [],
      accept: "",
      fileTypeName: "",
      uploadName: "",
      uploadTip:"",
      loading: false,
    };
  },
  computed: {
    url() {
      let userInfor = getToken();
      let access_token = "";
      if (userInfor) {
        let user = JSON.parse(getToken());
        access_token = user.access_token;
      }
      return (
        process.env.VUE_APP_BASE_API +
        "/FileServer/WebFileUpload?AccessToken=" +
        access_token +
        "&SecurityLevel=High"
      );
    },
  },
  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) {
        response.duration = response.file_info_list[0].media_duration
          ? response.file_info_list[0].media_duration
          : 10;
        this.$message.success("用户上传成功");
        if(this.fileName){
            this.changeFillId(fileList, this.fileName);
        }else{
            this.changeFillId(fileList);
        }
        this.loading.close();
      } else {
        this.fileList = [];
        this.$message.warning(response.msg);
        this.loading.close();
      }
    },
    handlebeforeUpload(file) {
      if (this.uploadType === 'image') {
        if (file.size > 2 * 1024 * 1024) {
          this.$message.warning('上传图片大小不能超过2M');
          return false; // 必须返回false
        }
      } else if (this.uploadType === 'mp4') {
        if (file.size > 500 * 1024 * 1024) {
          this.$message.warning('上传视频大小不能超过500M');
          return false; // 必须返回false
        }
      } else if (file.size > 20 * 1024 * 1024) {
        this.$message.warning('上传文件大小不能超过20M');
        return false; // 必须返回false
      }
      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.fileName);
      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 = ".jpg, .JPG, .jpeg, .JPEG .png, .PNG";
          this.fileTypeName = "图片";
          this.uploadName = name + "图片";
          this.uploadTip = "只能上传.jpg, .jpeg, .png文件，大小不超过2MB"
          break;
        case "mp3":
          this.accept = ".mp3,.MP3,.wav,.WAV";
          this.fileTypeName = "音频";
          this.uploadName = name + "音频";
          this.uploadTip = "只能上传音频文件，大小不超过20MB"
          break;
        case "mp4":
          this.accept = "video/*";
          this.fileTypeName = "视频";
          this.uploadName = name + "视频";
          this.uploadTip = "只能上传视频文件，大小不超 2GB"
          break;
        case "pdf":
          this.accept = ".pdf";
          this.fileTypeName = "pdf";
          this.uploadName = name + "pdf";
          this.uploadTip = "只能上传pdf文件，大小不超过20MB"
          break;
        case "xls":
          this.accept = ".xls,.xlsx";
          this.fileTypeName = "表格";
          this.uploadName = name + "表格";
          this.uploadTip = "只能上传excel文件，大小不超过20MB"
          break;
        case "lrc":
          this.accept = ".lrc";
          this.fileTypeName = "lrc";
          this.uploadName = name + "lrc";
          this.uploadTip = "只能上传lrc文件，大小不超过20MB"
          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>