axios上傳圖片(及vue上傳圖片到七牛)）

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

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.bucket,//七牛的地址，這個是你本身配置的（變量）
          };
          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('已上傳該圖片');
            }
          })
      },