資訊專欄INFORMATION COLUMN
摘要：對于前端人員來說，圖片處理是一個(gè)很常見的需求，由于圖片稍微特殊，現(xiàn)在多數(shù)做法都是使用調(diào)用接口通過方法來提交，例如方法提交，后臺處理后返回一個(gè)圖片路徑給前端，前端根據(jù)這個(gè)路徑寫入標(biāo)簽，但是基于當(dāng)前的前后端分離的開發(fā)模式下，前后端代碼往往不在同
對于前端人員來說，圖片處理是一個(gè)很常見的需求，由于圖片稍微特殊，現(xiàn)在多數(shù)做法都是使用調(diào)用ajax接口通過http方法來提交，例如post方法提交，后臺處理后返回一個(gè)圖片路徑給前端，前端根據(jù)這個(gè)路徑寫入img標(biāo)簽，但是基于當(dāng)前的前后端分離的開發(fā)模式下，前后端代碼往往不在同一個(gè)系統(tǒng)目錄下，而且部署時(shí)可能liunx路徑與windows路徑不一樣，這樣后期路徑更改可能會導(dǎo)致維護(hù)困難問題出現(xiàn)。
針對這種問題，這里我推薦使用圖片轉(zhuǎn)base64格式，再發(fā)給后端，后端只需將轉(zhuǎn)碼結(jié)果存入數(shù)據(jù)庫即可，前端調(diào)用接口直接獲取到base64數(shù)據(jù)直接寫入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字符串即可！
以上就是本文全部內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/96486.html
摘要：哈哈主要還是我嫌麻煩四上傳圖片這里的頁面樣式，圖片壓縮和預(yù)覽都和上面一樣，這里我主要配置一下的，讓接口能夠成功上傳。如果想讓用戶有更好的體驗(yàn)，可以對圖片進(jìn)行一下壓縮和本地預(yù)覽。 一、通過Form表單提交上傳 HTML enctype屬性必不可少 上面一種方法通過表單自有屬性進(jìn)行提交，看似簡單，但是也有其最大的缺點(diǎn)，那就是提交...
摘要：哈哈主要還是我嫌麻煩四上傳圖片這里的頁面樣式，圖片壓縮和預(yù)覽都和上面一樣，這里我主要配置一下的，讓接口能夠成功上傳。如果想讓用戶有更好的體驗(yàn)，可以對圖片進(jìn)行一下壓縮和本地預(yù)覽。 一、通過Form表單提交上傳 HTML enctype屬性必不可少 上面一種方法通過表單自有屬性進(jìn)行提交，看似簡單，但是也有其最大的缺點(diǎn)，那就是提交...
摘要：本次的內(nèi)容是圖片的上傳預(yù)覽。待上傳圖像點(diǎn)擊藍(lán)色框內(nèi)，可以選擇文件，移動端選擇拍照或選擇圖片進(jìn)行上傳。部分請點(diǎn)擊這層就是加號圖像是轉(zhuǎn)碼后顯示圖像的地方。最后的預(yù)覽圖像地址以后會加入更多的小插件。 hello，大家好，游戲開始了，歡迎大家收看這一期的講解。本次的內(nèi)容是圖片的上傳預(yù)覽。最后發(fā)源碼鏈接。廢話不多說，先上圖。showImg(https://segmentfault.com/img...
摘要：本次的內(nèi)容是圖片的上傳預(yù)覽。待上傳圖像點(diǎn)擊藍(lán)色框內(nèi)，可以選擇文件，移動端選擇拍照或選擇圖片進(jìn)行上傳。部分請點(diǎn)擊這層就是加號圖像是轉(zhuǎn)碼后顯示圖像的地方。最后的預(yù)覽圖像地址以后會加入更多的小插件。 hello，大家好，游戲開始了，歡迎大家收看這一期的講解。本次的內(nèi)容是圖片的上傳預(yù)覽。最后發(fā)源碼鏈接。廢話不多說，先上圖。showImg(https://segmentfault.com/img...
閱讀 2984·2021-11-23 09:51
閱讀 3258·2021-11-12 10:36
閱讀 3267·2021-09-27 13:37
閱讀 3238·2021-08-17 10:15
閱讀 2651·2019-08-30 15:55
閱讀 2832·2019-08-30 13:07
閱讀 849·2019-08-29 16:32
閱讀 2697·2019-08-26 12:00
