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('已上傳該圖片');
            }
          })
      },