UploadMaterials.vue

<template>
  <el-upload
    class="upload-demo"
    :action="uploadFileUrl"
    :before-upload="handleBeforeUpload"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :fileType="fileType"
    :limit="1"
    :on-exceed="handleExceed"
    :on-success="handleUploadSuccess"
    :show-file-list="false"
    :headers="headers"
    :file-list="fileList">
    <el-button size="small" type="text" icon="el-icon-upload">上传培训资料</el-button>
    <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
  </el-upload>
</template>

<script>
    import { getToken } from "@/utils/auth";
    import { updateApproval } from "@/api/deviceManagement/changeApplyApproval";
    export default {
      name: "upload-materials",
      props:{
        changeApplyId:{
          type: Number,
        },
      },
      data() {
        return {
          uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
          headers: {
            Authorization: "Bearer " + getToken(),
          },
          fileList: [],
          fileType: ["doc", "xls", "ppt", "txt", "pdf"]
        };
      },
      methods: {
        // 上传前校检格式和大小
        handleBeforeUpload(file) {
          // 校检文件类型
          if (this.fileType) {
            let fileExtension = "";
            if (file.name.lastIndexOf(".") > -1) {
              fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
            }
            const isTypeOk = this.fileType.some((type) => {
              if (file.type.indexOf(type) > -1) return true;
            if (fileExtension && fileExtension.indexOf(type) > -1) return true;
            return false;
          });
            if (!isTypeOk) {
              this.$message.error(
                `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
              );
              return false;
            }
          }
          // 校检文件大小
          if (this.fileSize) {
            const isLt = file.size / 1024 / 1024 < this.fileSize;
            if (!isLt) {
              this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
              return false;
            }
          }
          return true;
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        // 上传成功回调
        handleUploadSuccess(res, file) {
          updateApproval({ changeApplyId: this.changeApplyId, trainMaterial: res.url, changeApplyStatus: "3" }).then(res =>{
            if(res.code == 200){
              this.$message.success("上传成功");
              this.$emit('getList');
            }else{
              this.$message.error("上传失败")
            }
          })
        },
      }
    }
</script>

<style scoped lang="scss">
  .upload-demo{
    display: inline;
    margin: 10px;
  }

</style>