? ?對(duì)于前端人員來(lái)說(shuō)碰镜，圖片處理是一個(gè)很常見的需求鲫惶，由于圖片稍微特殊，現(xiàn)在多數(shù)做法都是使用調(diào)用ajax接口通過(guò)http方法來(lái)提交岗憋，例如post方法提交肃晚，后臺(tái)處理后返回一個(gè)圖片路徑給前端，前端根據(jù)這個(gè)路徑寫入img標(biāo)簽仔戈，但是基于當(dāng)前的前后端分離的開發(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ù)直接寫入img src 標(biāo)簽即可户敬。?
```js
uploadFiles(){
? const 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)用獲取數(shù)據(jù)接口
? ? ? ? });
? ? ? } else {
? ? ? ? Alert('圖片上傳失敗', res);
? ? ? }
? ? })
? };
}
```
