这篇文章主要为大家展示了“vue.js如何实现图片转Base64上传图片并预览”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue.js如何实现图片转Base64上传图片并预览”这篇文章吧。
使用element ui upload组件实现思路
代码如下：
计算
安全
数据库
网络和加速
企业服务
<el-upload
ref='upload'
:auto-upload='false'
:file-list="fileList"
:multiple='false'
:limit="1"
:on-exceed="handleExceed"
:http-request="uploadFiles"
accept="image/jpeg,image/gif,image/png"
action=''
:on-change='changeUpload'
>
<el-button slot="trigger" size="mini" type="primary">选取图片</el-button>
<span> </span>
<el-button @click='uploadFiles' size="mini" type="primary">点击上传</el-button>
</el-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字符串即可！
以上是“vue.js如何实现图片转Base64上传图片并预览”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
