对于前端人员来说，图片处理是一个很常见的需求。因为图片有点特殊，现在大部分方法都是使用ajax接口通过http方法提交，比如post方法提交，后台处理返回一个图片路径给前端，前端写入img标签按照这个路径，但是基于目前前后端分离的开发模式，前后端代码往往不在同一个系统目录下，可能部署在liunx路径下与windows路径不同，所以后期修改路径可能会造成维护困难。为了解决这个问题，这里我推荐将图片转为base64格式，然后发送到后台。后端只需要将转码结果存入数据库，前端调用接口直接获取base64数据直接写入imgsrc标签即可。下面使用elementui上传组件实现idea代码如下：选择图片点击上传js部分//点击上传图片，上传成功返回图片路径uploadFiles(){varThat=this;letfile=this.$refs.upload.$refs['upload-inner'].$refs.input;//获取文件数据letfileList=file.files;变量img文件；让阅读器=新文件阅读器（）；//html5读取文件reader.readAsDataURL(fileList[0]);//转base64reader.onload=function(e){//读取后调用接口imgFile=e.target.result;让obj={id:"loginLogo",configGroup:"logo",configItem:"loginLogo",itemValue:imgFile}returnBaseApi.uploadFiles(obj).then((res)=>{if(res.status=='SUCCESS'){AlertBox('图片上传成功！','success',true).then(()=>{returnThat.getSysLogo();//调用获取base64数据接口});}else{Alert('图片上传失败',res);return''}})};}，最后在接口imgsrc标签中绑定That.getSysLogo()接口返回的base64字符串即可！以上就是本文的全部内容
