HM21St_Page_Manager/src/components/Upload.vue

<!--  -->
<template>
  <div class="upload">
    <el-upload
      :accept="accept"
      style="width: 500px"
      class="upload-demo"
      ref="upload"
      :action="url"
      :on-preview="handlePreview"
      :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"
      :on-progress="uploadVideoProcess"
      multiple
      :headers="{ 'Content-Type': 'multipart/form-data' }"
    >
      <template v-if="styleType === 'upload'">
        <div class="upload-style">
          <i class="el-icon-plus avatar-uploader-icon"></i>
          <br />
          Upload
        </div>
      </template>
      <template v-else>
        <el-button size="mini" type="primary">
          <svg-icon icon-class="upload"></svg-icon>
          上传
        </el-button>
      </template>
      <div slot="tip" class="el-upload__tip">
        {{ tips || uploadTip }}
      </div>
    </el-upload>
    <!-- <div class="zhezhao" v-loading.fullscreen.lock="fullscreenLoading"></div> -->
    <el-progress
      style="width: 500px"
      v-if="progressFlag"
      :percentage="loadProgress"
    ></el-progress>
  </div>
</template>

<script>
import { getToken } from "../utils/auth";
export default {
  components: {},
  props: [
    "uploadType",
    "filleNumber",
    "datafileList",
    "changeFillId",
    "fileName",
    "showList",
    "tips",
    "styleType",
  ],
  data() {
    return {
      fileList: [],
      accept: "",
      fileTypeName: "",
      uploadName: "",
      uploadTip: "",
      loading: false,
      loadProgress: 0, // 动态显示进度条
      progressFlag: 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) {},
    uploadVideoProcess(event, file, fileList) {
      this.progressFlag = true; // 显示进度条
      this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
      if (this.loadProgress >= 100) {
        this.loadProgress = 100;
        setTimeout(() => {
          this.progressFlag = false;
        }, 1000); // 一秒后关闭进度条
      }
    },
    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;
        if (fileList.every(({ response }) => response?.status)) {
          this.$refs.upload.clearFiles();
          this.$message.success("用户上传成功");
          if (this.fileName) {
            this.changeFillId(fileList, this.fileName, file);
          } else {
            this.changeFillId(fileList, file);
          }
        }
        // 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 > 4000 * 1024 * 1024) {
          this.$message.warning("上传视频大小不能超过4G");
          return false; // 必须返回false
        }
      } else if (this.uploadType === "mp3") {
        if (file.size > 20 * 1024 * 1024) {
          this.$message.warning("上传音频大小不能超过20M");
          return false; // 必须返回false
        }
      } else if (this.uploadType === "video&radio") {
        if (file.size > 500 * 1024 * 1024) {
          this.$message.warning("上传文件大小不能超过500M");
          return false; // 必须返回false
        }
      } else if (file.size > 200 * 1024 * 1024) {
        this.$message.warning("上传文件大小不能超过200M");
        return false; // 必须返回false
      } else if (this.uploadType === "txt") {
        let index = file.name.lastIndexOf(".");
        let names = file.name;
        let type = names.substring(index + 1).toLowerCase();
        if (type !== "txt") {
          this.$message.warning("请上传txt文件");
          return 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 = ".mp4,.MP4,.mov,.MOV";
          this.fileTypeName = "视频";
          this.uploadName = name + "视频";
          this.uploadTip = "只能上传视频文件，大小不超 4GB";
          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;
        case "video&radio":
          this.accept = ".mp3,.MP3,.wav,.WAV,.mp4,.MP4,.mov,.MOV";
          this.uploadTip = "";
          break;
        case "txt":
          this.accept = ".txt,.TXT";
          this.uploadTip = "";
          break;
        default:
          this.accept = "*";
          this.fileTypeName = "文件";
          this.uploadName = "";
          break;
      }
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.upload-style {
  padding: 8px;
  border-radius: 2px;
  border: 1px dashed #e5e6eb;
  background: #f2f3f5;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
</style>