vue + element 文件上傳及校驗

上傳文件 后台需要 formate 進行上傳，中間遇到一點小插曲 先貼大佬地址https://www.cnblogs.com/fmixue/p/9968910.html

發現 不用自己定義請求方式，和修改請求頭里面的content-type:"multipart/form-data"
直接在action里寫請求地址，element貌似默認是post請求，並且默認轉為了FormData方式

 

on-success 事件 

handleAvatarSuccess（res,file,fileList）{
    res是請求回來的數據
    file是文件信息
    fileList是請求文件列表
}

文件上傳驗證
首先在el-form-item  綁定好prop="imgUpload" 並且 ref="xxx"  （ref用於上傳成功文件后清除驗證）

//前提form表單要綁定rules：data中  
rules:{
     imgUpload: [ { required:true, validator:validateFileUrl, trigger:["change"] } ] 
}

//定義校驗規則
let validateFileUrl = (rule, value, callback) => {
   if(this.$refs.imgUpload){  //this.$refs.imgUpload 這個打印一下就知道要的判斷條件
       callback(new Error("請上傳文件"))
   }else{
       callback()
   }              
}

//上傳成功后清除驗證
this.$refs.xxx.clearValidate();

如果需要判斷文件類型的話 可以在before-upload 這個方法上進行操作  只是對文件擴展名進行校驗

handleBeforeUpload(file) {
      let extension = file.name.split(".")[1];
      let extensionList = ["xls", "xlsx"];
      if (extensionList.indexOf(extension) < 0) {
        this.$message.warning("只能上傳Excel文件");
        return false;
      }
      console.log(file);
    },