VUE axios上傳圖片到七牛的執行個體代碼，

VUE axios上傳圖片到七牛的執行個體代碼，

瀏覽器上傳圖片到服務端，我用過兩種方法：

1.本地圖片轉換成base64，然後通過普通的post請求發送到服務端。

操作簡單，適合小圖，以及如果想相容低版本的ie沒辦法用此方法

2.通過form表單提交。

form表單提交圖片會重新整理頁面，也可以時form綁定到一個隱藏的iframe上，可以實現無重新整理提交資料。但是如果想傳輸多條form表單資料，需要寫很多dom，同時還要寫iframe，太麻煩。

目前感覺比較乾淨的辦法就是通過axios的post請求，發送form資料到後台。

html部分，至於介面最佳化，可以把input file的opacity設定為0，點擊其父容器，即觸發file

複製代碼 代碼如下:
<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

axios的post請求，發送form資料部分，這樣就可以無重新整理的提交form資料到後台

update(e){     let file = e.target.files[0];           let param = new FormData(); //建立form對象     param.append('file',file,file.name);//通過append向form對象添加資料     param.append('chunk','0');//添加form表單中其他資料     console.log(param.get('file')); //FormData私人類對象，訪問不到，可以通過get判斷值是否傳進去     let config = {      headers:{'Content-Type':'multipart/form-data'}     }; //添加要求標頭     this.axios.post('http://upload.qiniu.com/',param,config)     .then(response=>{      console.log(response.data);     })    }

以下部分是擴充

vue開發環境下，上傳圖片到七牛

最近著手的約能人項目，需要上傳圖片到七牛，但是感覺只是簡單的上傳圖片還需要引七牛的js，太麻煩了，就自己一切從簡。實現邏輯：擷取後台返回的七牛token，然後axios的post請求，發送form資料到七牛。

 七牛的token是其平台封裝好的，直接在自己伺服器配置就能擷取到 在其官網上可以找到直接能用的代碼  ，在七牛平台擷取到後，返回給前台直接拿就好了

以下是直接上傳圖片到七牛，不需要安裝七牛亂七八糟的js,只需要通過七牛的form表單上傳就行了。

 update(e){     let file = e.target.files[0];     let d = new Date();     let type = file.name.split('.');     let tokenParem = {       'putPolicy':'{\"name\":\"$(fname)\",\"size\":\"$(fsize)\",\"w\":\"$(imageInfo.width)\",\"h\":\"$(imageInfo.height)\",\"hash\":\"$(etag)\"}',       'key':'orderReview/'+d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate()+'/'+d.valueOf()+'.'+type[type.length-1],       'bucket':this.domain,//七牛的地址，這個是你自己配置的（變數）     };     let param = new FormData(); //建立form對象     param.append('chunk','0');//斷點傳輸     param.append('chunks','1');     param.append('file',file,file.name)     console.log(param.get('file')); //FormData私人類對象，訪問不到，可以通過get判斷值是否傳進去     let config = {      headers:{'Content-Type':'multipart/form-data'}     };    //先從自己的服務端拿到token     this.axios.post(api.uploadToken,qs.stringify(tokenParem))      .then(response=>{        this.token = response.data.uploadToken;        param.append('token',this.token);        if(this.images.length>8){          alert('不能超過9張');          return;        }        this.uploading(param,config,file.name);//然後將參數上傳七牛        return;      })   },   uploading(param,config,pathName){    this.axios.post('http://upload.qiniu.com/',param,config)     .then(response=>{      console.log(response.data);      let localArr = this.images.map((val,index,arr)=>{       return arr[index].localSrc;      })      if(!~localArr.indexOf(pathName)){       this.images.push({'src':this.showUrl+response.data.key,'localSrc':pathName});      }else{        alert('已上傳該圖片');      }     })   },    

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。