vue.js图片转Base64上传图片并预览的实现方法

前端之家收集整理的这篇文章主要介绍了vue.js图片转Base64上传图片并预览的实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

对于前端人员来说,图片处理是一个很常见的需求,由于图片稍微特殊,现在多数做法都是使用调用ajax接口通过http方法来提交,例如post方法提交,后台处理后返回一个图片路径给前端,前端根据这个路径写入@R_404_207@,但是基于当前的前后端分离的开发模式下,前后端代码往往不在同一个系统目录下,而且部署时可能liunx路径与windows路径不一样,这样后期路径更改可能会导致维护困难问题出现。

针对这种问题,这里我推荐使用图片转base64格式,再发给后端,后端只需将转码结果存入数据库即可,前端调用接口直接获取到base64数据直接写入img src 标签即可

下面使用element ui upload组件实现思路

代码如下:

图片 上传

js部分

{ if(res.status=='SUCCESS'){ AlertBox('图片上传成功!','success',true).then(()=>{ return That.getSyslogo(); //调用获取base64数据接口 }); }else{ Alert('图片上传失败',res); return '' } })

};
},

最后在界面img src标签中绑定That.getSyslogo()接口返回的base64字符串即可!

以上就是本文全部内容。 希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/31244.html

猜你在找的Vue相关文章