? ?對(duì)于前端人員來說，圖片處理是一個(gè)很常見的需求，由于圖片稍微特殊，現(xiàn)在多數(shù)做法都是使用調(diào)用ajax接口通過http方法來提交，例如post方法提交，后臺(tái)處理后返回一個(gè)圖片路徑給前端，前端根據(jù)這個(gè)路徑寫入img標(biāo)簽，但是基于當(dāng)前的前后端分離的開發(fā)模式下，前后端代碼往往不在同一個(gè)系統(tǒng)目錄下，而且部署時(shí)可能liunx路徑與windows路徑不一樣，這樣后期路徑更改可能會(huì)導(dǎo)致維護(hù)困難問題出現(xiàn)。針對(duì)這種問題，這里我推薦使用圖片轉(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);

? ? ? }

? ? })

? };

}

```