vue项目base64字符串转图片的实现代码


Posted in Javascript onJuly 13, 2018
<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);
}

vue项目base64字符串转图片的实现代码

如果修改头像,向后台传base64字符串,否则会传原图片路径,后台判断是否是base64字符串.

如果是base64字符串,则对base64字符串进行处理,在后台服务器生成图片.此处需要对base64字符串进行处理,如图所示,删除蓝框部分,留逗号之后的内容.

若为图片路径,则不需要进行处理,直接返回图片路径即可.

vue项目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字符串转图片的实现代码

vue项目base64字符串转图片的实现代码

总结

以上所述是小编给大家介绍的vue项目base64字符串转图片的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
angular 组件通信的几种实现方式
Jul 13 #Javascript
JavaScript实现异步图像上传功能
Jul 12 #Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 #Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 #Javascript
详解node.js的http模块实例演示
Jul 12 #Javascript
Vue中使用的EventBus有生命周期
Jul 12 #Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 #Javascript
You might like
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
PHP开发的一些注意点总结
2010/10/12 PHP
深入php内核之php in array
2015/11/10 PHP
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
技校学生个人职业生涯规划范文
2014/03/03 职场文书
建房协议书
2014/04/11 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
教师党员个人自我评价
2015/03/04 职场文书
尼克胡哲观后感
2015/06/08 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android