vue.js圖片轉(zhuǎn)Base64上傳圖片并預(yù)覽

ralap 發(fā)布于2019-08-23 10:35 / 2574人閱讀

摘要：對(duì)于前端人員來(lái)說(shuō)，圖片處理是一個(gè)很常見(jiàn)的需求，由于圖片稍微特殊，現(xiàn)在多數(shù)做法都是使用調(diào)用接口通過(guò)方法來(lái)提交，例如方法提交，后臺(tái)處理后返回一個(gè)圖片路徑給前端，前端根據(jù)這個(gè)路徑寫(xiě)入標(biāo)簽，但是基于當(dāng)前的前后端分離的開(kāi)發(fā)模式下，前后端代碼往往不在同

對(duì)于前端人員來(lái)說(shuō)，圖片處理是一個(gè)很常見(jiàn)的需求，由于圖片稍微特殊，現(xiàn)在多數(shù)做法都是使用調(diào)用ajax接口通過(guò)http方法來(lái)提交，例如post方法提交，后臺(tái)處理后返回一個(gè)圖片路徑給前端，前端根據(jù)這個(gè)路徑寫(xiě)入img標(biāo)簽，但是基于當(dāng)前的前后端分離的開(kāi)發(fā)模式下，前后端代碼往往不在同一個(gè)系統(tǒng)目錄下，而且部署時(shí)可能liunx路徑與windows路徑不一樣，這樣后期路徑更改可能會(huì)導(dǎo)致維護(hù)困難問(wèn)題出現(xiàn)。

針對(duì)這種問(wèn)題，這里我推薦使用圖片轉(zhuǎn)base64格式，再發(fā)給后端，后端只需將轉(zhuǎn)碼結(jié)果存入數(shù)據(jù)庫(kù)即可，前端調(diào)用接口直接獲取到base64數(shù)據(jù)直接寫(xiě)入img src 標(biāo)簽即可

下面使用element ui upload組件實(shí)現(xiàn)思路

代碼如下：

  
    選取圖片
     
    點(diǎn)擊上傳

js部分

    //點(diǎn)擊上傳圖片,上傳成功返回圖片路徑 
    uploadFiles(){
        var That=this;
      let file=this.$refs.upload.$refs["upload-inner"].$refs.input; //獲取文件數(shù)據(jù)
      let fileList=file.files;      
      var imgFile;
      let reader = new FileReader();     //html5讀文件
      reader.readAsDataURL(fileList[0]); //轉(zhuǎn)BASE64       
      reader.onload=function(e) {        //讀取完畢后調(diào)用接口
        imgFile = e.target.result;
        let obj={
            id: "loginLogo",
            configGroup: "logo",
            configItem : "loginLogo",
          itemValue : imgFile    
        }
        return BaseApi.uploadFiles(obj).then((res)=>{
            if(res.status=="SUCCESS"){
                AlertBox("圖片上傳成功！","success",true).then(()=>{
                    return That.getSysLogo(); //調(diào)用獲取base64數(shù)據(jù)接口
                });
            }else{
                Alert("圖片上傳失敗",res);
                return ""
            }
        })

      };          
    },

最后在界面img src標(biāo)簽中綁定That.getSysLogo()接口返回的base64字符串即可！
以上就是本文全部?jī)?nèi)容。