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 相关文章推荐
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
python中dict使用方法详解
2019/07/17 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
怎么快速自学python
2020/06/22 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
一道SQL面试题
2012/12/31 面试题
数控个人求职信范文
2014/02/03 职场文书
个人课题方案
2014/05/08 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
党员证明模板
2015/06/19 职场文书
赞助商致辞
2015/07/30 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
入门学习Go的基本语法
2021/07/07 Golang
Redis批量生成数据的实现
2022/06/05 Redis