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


Posted in Javascript onAugust 02, 2018

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

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

下面使用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字符串即可!

以上就是本文全部内容。 希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
使用jquery如何获取时间
Oct 13 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
vue组件横向树实现代码
Aug 02 #Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 #Javascript
在微信小程序里使用watch和computed的方法
Aug 02 #Javascript
在小程序中使用Echart图表的示例代码
Aug 02 #Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 #Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 #Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 #Javascript
You might like
也谈 PHP 和 MYSQL
2006/10/09 PHP
php基本函数汇总
2015/07/09 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
python中 chr unichr ord函数的实例详解
2017/08/06 Python
numpy基础教程之np.linalg
2019/02/12 Python
python多线程同步之文件读写控制
2021/02/25 Python
django 读取图片到页面实例
2020/03/27 Python
python实现飞船大战
2020/04/24 Python
如何在python中执行另一个py文件
2020/04/30 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
Sony C++笔试题
2013/03/10 面试题
什么是反射?如何实现反射?
2016/07/25 面试题
入党申请书自我鉴定
2013/10/12 职场文书
本科生求职简历的自我评价
2013/10/21 职场文书
档案接收函
2014/01/13 职场文书
买卖协议书范本
2014/04/21 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python