溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-09-04 11:57:37 來源：腳本之家 閱讀：219 作者：無敵小坑筆 欄目：web開發(fā)

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

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

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

2.通過form表單提交。

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

目前感覺比較干凈的辦法就是通過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ù)部分，這樣就可以無刷新的提交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);//通過append向form對(duì)象添加數(shù)據(jù)
     param.append('chunk','0');//添加form表單中其他數(shù)據(jù)
     console.log(param.get('file')); //FormData私有類對(duì)象，訪問不到，可以通過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開發(fā)環(huán)境下，上傳圖片到七牛

最近著手的約能人項(xiàng)目，需要上傳圖片到七牛，但是感覺只是簡(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,只需要通過七牛的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私有類對(duì)象，訪問不到，可以通過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('不能超過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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手