vue項(xiàng)目base64字符串轉(zhuǎn)圖片的實(shí)現(xiàn)代碼
<img :onerror="errpic" class="customerHead" :src="param.customerHead" alt="">
data() {
return {
param:{
id:"",
customerHead: "",
}
}
}
let _this = this
let files = e.target.files[0]
if (files.size/(1024*1024) > 2) {
this.open('上傳的圖片不可大于2M!')
return false;
}
var reader = new FileReader();
reader.onload = function (e) {
var base64 = e.target.result;
_this.param.customerHead = base64
//console.log(base64)
}
if(files) {
reader.readAsDataURL(files);
}

如果修改頭像,向后臺(tái)傳base64字符串,否則會(huì)傳原圖片路徑,后臺(tái)判斷是否是base64字符串.
如果是base64字符串,則對(duì)base64字符串進(jìn)行處理,在后臺(tái)服務(wù)器生成圖片.此處需要對(duì)base64字符串進(jìn)行處理,如圖所示,刪除藍(lán)框部分,留逗號(hào)之后的內(nèi)容.
若為圖片路徑,則不需要進(jìn)行處理,直接返回圖片路徑即可.

@Value("${upload.image.path}")
private String filePath;
//base64字符串轉(zhuǎn)化成圖片 headerImgPath:http://+ip+:端口號(hào)
public String generateImage(String imgStr,String headerImgPath,String cusID)
{ //對(duì)字節(jié)數(shù)組字符串進(jìn)行Base64解碼并生成圖片
if (imgStr == null) //圖像數(shù)據(jù)為空
return "../picclife/static/custom.png";
BASE64Decoder decoder = new BASE64Decoder();
try
{
//判斷是base64字符串還是圖片路徑
if(imgStr.substring(0,5).equals("data:")){
//Base64解碼
byte[] b = decoder.decodeBuffer(imgStr.substring(imgStr.indexOf(",") + 1));
for(int i=0;i<b.length;++i)
{
if(b[i]<0)
{//調(diào)整異常數(shù)據(jù)
b[i]+=256;
}
}
//生成圖片
String imgFilePath = filePath+"/headerImg/"+cusID+".jpg";//新生成的圖片
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();
return headerImgPath+"headerImg/"+cusID+".jpg";
}else{
return imgStr;
}
}
catch (Exception e)
{
return "../picclife/static/custom.png";
}
}


總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目base64字符串轉(zhuǎn)圖片的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue2 配置 Axios api 接口調(diào)用文件的方法
本篇文章主要介紹了Vue2 配置 Axios api 接口調(diào)用文件的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
element ui的el-input-number修改數(shù)值失效的問題及解決
這篇文章主要介紹了element ui的el-input-number修改數(shù)值失效的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05
Vue3實(shí)戰(zhàn)學(xué)習(xí)配置使用vue?router路由步驟示例
這篇文章主要為大家介紹了Vue3實(shí)戰(zhàn)學(xué)習(xí)配置使用vue?router路由步驟示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06
Vue Router中獲取路由傳遞過(guò)來(lái)的參數(shù)(方法詳解)
在VueRouter中,可以通過(guò)動(dòng)態(tài)路由匹配和查詢參數(shù)`query`來(lái)傳遞參數(shù),并將路由參數(shù)或查詢參數(shù)作為組件的`props`傳遞,動(dòng)態(tài)路由匹配使用`route.params`訪問參數(shù),查詢參數(shù)使用`route.query`訪問,本文給大家介紹Vue Router中獲取路由傳遞過(guò)來(lái)的參數(shù),感興趣的朋友一起看看吧2025-02-02
Vue如何在CSS中使用data定義的數(shù)據(jù)淺析
這篇文章主要給大家介紹了關(guān)于Vue如何在CSS中使用data定義的數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-05-05
vue-cli webpack模板項(xiàng)目搭建及打包時(shí)路徑問題的解決方法
這篇文章主要介紹了vue-cli webpack模板項(xiàng)目搭建以及打包時(shí)路徑問題的解決方法,需要的朋友可以參考下2018-02-02
vue+elementui 實(shí)現(xiàn)上傳文件/導(dǎo)入文件的功能示例詳解
文章介紹了如何使用Vue和Element UI實(shí)現(xiàn)上傳文件和導(dǎo)入文件的功能,主要內(nèi)容包括:上傳組件的使用、data中的數(shù)據(jù)存儲(chǔ)、methods中的方法(選擇文件、點(diǎn)擊確定上傳文件、刪除文件),文章還提供了相關(guān)鏈接供進(jìn)一步學(xué)習(xí),感興趣的朋友一起看看吧2025-03-03
vue+js點(diǎn)擊箭頭實(shí)現(xiàn)圖片切換
這篇文章主要為大家詳細(xì)介紹了vue+js點(diǎn)擊箭頭實(shí)現(xiàn)圖片切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06

