VUE axios上傳圖片到七牛的實(shí)例代碼

更新時(shí)間：2017年07月28日 15:40:36 作者：無(wú)敵小坑筆

本篇文章主要介紹了VUE axios上傳圖片到七牛的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

瀏覽器上傳圖片到服務(wù)端，我用過(guò)兩種方法：

1.本地圖片轉(zhuǎn)換成base64，然后通過(guò)普通的post請(qǐng)求發(fā)送到服務(wù)端。

操作簡(jiǎn)單，適合小圖，以及如果想兼容低版本的ie沒(méi)辦法用此方法

2.通過(guò)form表單提交。

form表單提交圖片會(huì)刷新頁(yè)面，也可以時(shí)form綁定到一個(gè)隱藏的iframe上，可以實(shí)現(xiàn)無(wú)刷新提交數(shù)據(jù)。但是如果想傳輸多條form表單數(shù)據(jù)，需要寫(xiě)很多dom，同時(shí)還要寫(xiě)iframe，太麻煩。

目前感覺(jué)比較干凈的辦法就是通過(guò)axios的post請(qǐng)求，發(fā)送form數(shù)據(jù)到后臺(tái)。

html部分，至于界面優(yōu)化，可以把input file的opacity設(shè)置為0，點(diǎn)擊其父容器，即觸發(fā)file

復(fù)制代碼代碼如下:

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> 

axios的post請(qǐng)求，發(fā)送form數(shù)據(jù)部分，這樣就可以無(wú)刷新的提交form數(shù)據(jù)到后臺(tái)

update(e){
     let file = e.target.files[0];      
     let param = new FormData(); //創(chuàng)建form對(duì)象
     param.append('file',file,file.name);//通過(guò)append向form對(duì)象添加數(shù)據(jù)
     param.append('chunk','0');//添加form表單中其他數(shù)據(jù)
     console.log(param.get('file')); //FormData私有類(lèi)對(duì)象，訪問(wèn)不到，可以通過(guò)get判斷值是否傳進(jìn)去
     let config = {
      headers:{'Content-Type':'multipart/form-data'}
     }; //添加請(qǐng)求頭
     this.axios.post('http://upload.qiniu.com/',param,config)
     .then(response=>{
      console.log(response.data);
     })    
}

以下部分是擴(kuò)展

vue開(kāi)發(fā)環(huán)境下，上傳圖片到七牛

最近著手的約能人項(xiàng)目，需要上傳圖片到七牛，但是感覺(jué)只是簡(jiǎn)單的上傳圖片還需要引七牛的js，太麻煩了，就自己一切從簡(jiǎn)。實(shí)現(xiàn)邏輯：獲取后臺(tái)返回的七牛token，然后axios的post請(qǐng)求，發(fā)送form數(shù)據(jù)到七牛。

七牛的token是其平臺(tái)封裝好的，直接在自己服務(wù)器配置就能獲取到在其官網(wǎng)上可以找到直接能用的代碼，在七牛平臺(tái)獲取到后，返回給前臺(tái)直接拿就好了

以下是直接上傳圖片到七牛，不需要安裝七牛亂七八糟的js,只需要通過(guò)七牛的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,//七牛的地址，這個(gè)是你自己配置的（變量）
     };
     let param = new FormData(); //創(chuàng)建form對(duì)象
     param.append('chunk','0');//斷點(diǎn)傳輸
     param.append('chunks','1');
     param.append('file',file,file.name)
     console.log(param.get('file')); //FormData私有類(lèi)對(duì)象，訪問(wèn)不到，可以通過(guò)get判斷值是否傳進(jìn)去
     let config = {
      headers:{'Content-Type':'multipart/form-data'}
     };
    //先從自己的服務(wù)端拿到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('不能超過(guò)9張');
          return;
        }
        this.uploading(param,config,file.name);//然后將參數(shù)上傳七牛
        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('已上傳該圖片');
      }
     })
   },

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: