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 相关文章推荐
为调试JavaScript添加输出窗口的代码
Feb 07 Javascript
JavaScript Eval 函数使用
Mar 23 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
理解Javascript的call、apply
Dec 16 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
js代码编写无缝轮播图
Sep 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
javascript中的new使用
2010/03/20 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
django1.11.1 models 数据库同步方法
2018/05/30 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python基础 range的用法解析
2019/08/23 Python
Pytorch之contiguous的用法
2019/12/31 Python
Python类的动态绑定实现原理
2020/03/21 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
继承公证书样本
2014/04/04 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
本科应届生自荐信
2014/06/29 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
云台山导游词
2015/02/03 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
解决redis批量删除key值的问题
2022/03/23 Redis
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers