對于前端人員來說，圖片處理是一個很常見的需求，由于圖片稍微特殊，現在多數做法都是使用調用ajax接口通過http方法來提交，例如post方法提交，后臺處理后返回一個圖片路徑給前端，前端根據這個路徑寫入img標簽，但是基于當前的前后端分離的開發模式下，前后端代碼往往不在同一個系統目錄下，而且部署時可能liunx路徑與windows路徑不一樣，這樣后期路徑更改可能會導致維護困難問題出現。
針對這種問題，這里我推薦使用圖片轉base64格式，再發給后端，后端只需將轉碼結果存入數據庫即可，前端調用接口直接獲取到base64數據直接寫入img src 標簽即可
下面使用element ui upload組件實現思路
代碼如下：
<el-upload ref='upload' :auto-upload='false' :file-list="fileList" :multiple='false' :limit="1" :on-exceed="handleExceed" :http-request="uploadFiles" accept="image/jpeg,image/gif,image/png" action='' :on-change='changeUpload' > <el-button slot="trigger" size="mini" type="primary">選取圖片</el-button> <span> </span> <el-button @click='uploadFiles' size="mini" type="primary">點擊上傳</el-button> </el-upload>
js部分
//點擊上傳圖片,上傳成功返回圖片路徑
uploadFiles(){
var That=this;
let file=this.$refs.upload.$refs['upload-inner'].$refs.input; //獲取文件數據
let fileList=file.files;
var imgFile;
let reader = new FileReader(); //html5讀文件
reader.readAsDataURL(fileList[0]); //轉BASE64
reader.onload=function(e) { //讀取完畢后調用接口
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(); //調用獲取base64數據接口
});
}else{
Alert('圖片上傳失敗',res);
return ''
}
})
};
},
最后在界面img src標簽中綁定That.getSysLogo()接口返回的base64字符串即可！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2023 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
