iview的upload手動上傳圖片？

緣由：

1.後續要求新增了幾個輸入框判斷該用form表單上傳文件？

答：剛開始是採用了原先的axios上傳數據，可是有個問題會出現參數錯誤

message:"NOT found"

後續我又修改採用新建了formData()對象，而後使用for in 循環append到對象中，想打印出來打印出來不是一個空對象才奇怪。

屬性又不是直接掛載在你這個FormData實例上。

你能夠經過它提供的迭代器，或者get方法去取值。

而後繼續發送請求發現每次用那個方法傳值，可是這個_img始終在network打印不出來，並報錯，發現是須要加

let config ={

headets:{'Content-Type':'mutipart/form-data'}

}//請求頭

可是在封裝好的axios方法中沒法使用，因而就從新寫了個方法

 axios.post('/api/order/remitOrder', formData, config).then(res => {

     if(res.data.code == '0'){

          this.$Message.success("圖片上傳成功！");

          this.OrderListMoadl.stateModal = false;

         this.uploadList = '';

         this.uplodaVisible = true;

          this.initDataApi();

}else{

      this.$Message.error(res.msg)

}

console.log(res)

})

至此圖片成功上傳，可是由於是手動上傳在before-upload中renturn false 因此

鉤子驗證沒用須要本身驗證

 handleBeforeUpload(file) {

    this.uploadList='';

    const FileExt = file.name.replace(/.+\./, "");//取得文件的後綴名

    const Reg = /(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$/;

    if (file.size > 2097152) {//限制文件的大小

       this.$Message.error(file.name + '大小超過2M!')

          file = null //超過大小將文件清空

    } else if (!Reg.test(FileExt)) { //判斷文件是不是圖片格式

        this.$Message.error('圖片上傳格式不正確！');

        file=null

     }else{

         this.OrderListMoadl.formSubmit._img = file; //須要傳給後臺的file文件

        const reader = new FileReader();

        reader.readAsDataURL(file);

        reader.onload = () => {

        const _base64 = reader.result;

        this.uploadList = _base64; //將_base64賦值給圖片的src，實現圖片預覽

     };

     this.uplodaVisible = false;

     }

     return false//阻止默認上傳

},