vue项目base64字符串转图片的实现代码
程序员文章站
2023-11-04 09:12:04
<img :onerror="errpic" class="customerhead" :src="param.customerhead" alt=""> data() { return { param:{ id:"", customerhead: "", } } }
let _this = this let files = e.target.files[0] if (files.size/(1024*1024) > 2) { this.open('上传的图片不可大于2m!') return false; } var reader = new filereader(); reader.onload = function (e) { var base64 = e.target.result; _this.param.customerhead = base64 //console.log(base64) } if(files) { reader.readasdataurl(files); }
如果修改头像,向后台传base64字符串,否则会传原图片路径,后台判断是否是base64字符串.
如果是base64字符串,则对base64字符串进行处理,在后台服务器生成图片.此处需要对base64字符串进行处理,如图所示,删除蓝框部分,留逗号之后的内容.
若为图片路径,则不需要进行处理,直接返回图片路径即可.
@value("${upload.image.path}") private string filepath; //base64字符串转化成图片 headerimgpath:http://+ip+:端口号 public string generateimage(string imgstr,string headerimgpath,string cusid) { //对字节数组字符串进行base64解码并生成图片 if (imgstr == null) //图像数据为空 return "../picclife/static/custom.png"; base64decoder decoder = new base64decoder(); try { //判断是base64字符串还是图片路径 if(imgstr.substring(0,5).equals("data:")){ //base64解码 byte[] b = decoder.decodebuffer(imgstr.substring(imgstr.indexof(",") + 1)); for(int i=0;i<b.length;++i) { if(b[i]<0) {//调整异常数据 b[i]+=256; } } //生成图片 string imgfilepath = filepath+"/headerimg/"+cusid+".jpg";//新生成的图片 outputstream out = new fileoutputstream(imgfilepath); out.write(b); out.flush(); out.close(); return headerimgpath+"headerimg/"+cusid+".jpg"; }else{ return imgstr; } } catch (exception e) { return "../picclife/static/custom.png"; } }
总结
以上所述是小编给大家介绍的vue项目base64字符串转图片的实现代码,希望对大家有所帮助
上一篇: 入淘创业的新赛道:淘宝自运营覆盖50万商家 创造千亿增量市场
下一篇: 网站营销软文写作注意点分享