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 相关文章推荐
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 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
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
php实现微信扫码支付
2017/03/26 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python获取央视节目单的实现代码
2015/07/25 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
python文件操作相关知识点总结整理
2016/02/22 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
python实现最短路径的实例方法
2020/07/19 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
利用python 下载bilibili视频
2020/11/13 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
护理学毕业生求职信
2013/11/14 职场文书
教师辞职报告范文
2014/01/20 职场文书
安全技术说明书
2014/05/09 职场文书
关于开学的感想
2015/08/10 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
Java实现房屋出租系统详解
2021/10/05 Java/Android