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 Demo模态窗口
Dec 06 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 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文本操作类
2006/11/25 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
php利用header函数下载各种文件
2016/08/24 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
python opencv实现证件照换底功能
2019/08/19 Python
python实现从wind导入数据
2019/12/03 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python with语句和过程抽取思想
2019/12/23 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
Python 多进程原理及实现
2020/12/21 Python
Python tkinter实现日期选择器
2021/02/22 Python
应届生个人求职信模板
2013/11/26 职场文书
车间统计员岗位职责
2014/01/05 职场文书
投标单位介绍信
2014/01/09 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
处罚决定书范文
2015/06/24 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
Python IO文件管理的具体使用
2022/03/20 Python