element+Vue 之el-upload

           <el-form-item label="安装包:" prop="packageUrl">
              <el-upload
                class="upload-demo"
                drag
                action="string"
                :show-file-list="false"
                :headers="headers"
                :before-upload="beforeUpload"
                :http-request="f_uploadxls"
                accept=".apk,.ipa"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  仅支持APK、IPA格式文件，一次只可上传一个文件
                </div>
              </el-upload>
            </el-form-item>

  computed: {
    
    
    headers: function () {
    
    
      return {
    
    
        token: localStorage.getItem("token" + localStorage.getItem("urlHerf")),
      };
    },
  },
    methods: {
    
    
       // 效验文件类型
    checkFileType(file) {
    
    
      let allowTypesSet = new Set(["ipa", "apk"]);
      let fileType = file.name.replace(/.+\./, "");
      if (!allowTypesSet.has(fileType)) {
    
    
        this.$message({
    
    
          type: "warning",
          message: "不支持该文件类型",
        });
        return false;
      }
      return true;
    },

    // 上传之前
    beforeUpload(file) {
    
    
      var newLimit = changeSize(file.size);
      this.detailForm.packageSize = newLimit;
      if (!this.checkFileType(file)) {
    
    
        return false;
      }
      this.$forceUpdate();
    },
    //上传的实现
      f_uploadxls(data) {
    
    
      const formData = new FormData();
      formData.append("file", data.file);
      fileUpload(formData)
        .then((res) => {
    
    
          const {
    
     code, msg } = res.data;
          if (code == 200) {
    
    
            this.detailForm.packageUrl = res.data.msg;
          } else {
    
    
            const title = "操作失败";
            const type = "error";
            this.$notification(title, type, msg);
          }
        })
        .catch(() => {
    
    });
    },
    }