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学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
js对象简介与基本用法示例
Mar 13 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
咖啡知识大全
2021/03/03 新手入门
php用header函数实现301跳转代码实例
2013/11/25 PHP
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
angular2使用简单介绍
2016/03/01 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
py中的目录与文件判别代码
2008/07/16 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
PyTorch中的C++扩展实现
2020/04/02 Python
python小白切忌乱用表达式
2020/05/29 Python
设计师珠宝:Ylang 23
2018/05/11 全球购物
自荐书4要点
2014/01/25 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
保安岗位职责
2014/02/21 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
电气自动化求职信
2014/06/24 职场文书
计算机求职信
2014/07/02 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
大学生团日活动总结
2015/05/06 职场文书
关于环保的宣传稿
2015/07/23 职场文书
《搭石》教学反思
2016/02/18 职场文书
MySQL优化及索引解析
2022/03/17 MySQL