微客导航 » 文章资讯 » vue.js图片转Base64上传图片并预览的实现方法

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

2023-09-09 12:23:04 319

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

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

下面使用elementuiupload组件实现思路

代码如下：


选取图片
 
点击上传

js部分

//点击上传图片,上传成功返回图片路径
uploadFiles(){
varThat=this;
letfile=this.$refs.upload.$refs['upload-inner'].$refs.input;//获取文件数据
letfileList=file.files;
varimgFile;
letreader=newFileReader();//html5读文件
reader.readAsDataURL(fileList[0]);//转BASE64
reader.onload=function(e){//读取完毕后调用接口
imgFile=e.target.result;
letobj={
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字符串即可！

以上就是本文全部内容。希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐