摘要:对于前端人员来说,图片处理是一个很常见的需求,由于图片稍微特殊,现在多数做法都是使用调用接口通过方法来提交,例如方法提交,后台处理后返回一个图片路径给前端,前端根据这个路径写入标签,但是基于当前的前后端分离的开发模式下,前后端代码往往不在同
对于前端人员来说,图片处理是一个很常见的需求,由于图片稍微特殊,现在多数做法都是使用调用ajax接口通过http方法来提交,例如post方法提交,后台处理后返回一个图片路径给前端,前端根据这个路径写入img标签,但是基于当前的前后端分离的开发模式下,前后端代码往往不在同一个系统目录下,而且部署时可能liunx路径与windows路径不一样,这样后期路径更改可能会导致维护困难问题出现。
针对这种问题,这里我推荐使用图片转base64格式,再发给后端,后端只需将转码结果存入数据库即可,前端调用接口直接获取到base64数据直接写入img src 标签即可
下面使用element ui 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字符串即可!
以上就是本文全部内容。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/96486.html
摘要:哈哈主要还是我嫌麻烦四上传图片这里的页面样式,图片压缩和预览都和上面一样,这里我主要配置一下的,让接口能够成功上传。如果想让用户有更好的体验,可以对图片进行一下压缩和本地预览。 一、通过Form表单提交上传 HTML enctype属性必不可少 上面一种方法通过表单自有属性进行提交,看似简单,但是也有其最大的缺点,那就是提交...
摘要:哈哈主要还是我嫌麻烦四上传图片这里的页面样式,图片压缩和预览都和上面一样,这里我主要配置一下的,让接口能够成功上传。如果想让用户有更好的体验,可以对图片进行一下压缩和本地预览。 一、通过Form表单提交上传 HTML enctype属性必不可少 上面一种方法通过表单自有属性进行提交,看似简单,但是也有其最大的缺点,那就是提交...
摘要:本次的内容是图片的上传预览。待上传图像点击蓝色框内,可以选择文件,移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。 hello,大家好,游戏开始了,欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。废话不多说,先上图。showImg(https://segmentfault.com/img...
摘要:本次的内容是图片的上传预览。待上传图像点击蓝色框内,可以选择文件,移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。 hello,大家好,游戏开始了,欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。废话不多说,先上图。showImg(https://segmentfault.com/img...
阅读 2886·2021-11-23 09:51
阅读 3119·2021-11-12 10:36
阅读 3159·2021-09-27 13:37
阅读 3130·2021-08-17 10:15
阅读 2561·2019-08-30 15:55
阅读 2702·2019-08-30 13:07
阅读 771·2019-08-29 16:32
阅读 2615·2019-08-26 12:00