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