vue.js 上传图片实例代码


Posted in Javascript onJune 22, 2017

最近爱上了用vue.js做前端,昨天用vue上传图片时遇到了问题,最后半天时间终于摸索出来,我将相关部分的代码贴出来。

前端部分

<div class="form-group">
    <label>背景图</label>
    <input type="file" class="form-control" @change="onFileChange">
 </div>
<div class="form-group" v-if="image">
    <label>背景图预览</label>
    ![](image)
</div>

vue.js部分

在methods里添加

onFileChange(e) {
  var files = e.target.files || e.dataTransfer.files;
  if (!files.length)
   return;
   this.createImage(files[0]);
  },
createImage(file) {
  var image = new Image();
  var reader = new FileReader();
  var vm = this;

  reader.onload = (e) => {
    vm.image = e.target.result;
  };
    reader.readAsDataURL(file);
},

那么提交时如何获取呢?

在提交的方法里,通过 this.image 即可,获取的图片格式是图片流格式,以data:image开头。

如何在后端(我用php)获取呢?

直接贴代码

$bg = $request->get('image');//获取图片流
$url = explode(',',$bg);
$filename = md5(time().str_random(8)).'.png';//自定义图片名
$filepath = public_path('image').'/'.$filename;//图片存储路径
$bgurl = '/image/'.$filename;//图片url ,具体看自己后台环境,我用的是laravel
file_put_contents($filepath, base64_decode($url[1]));//保存图片到自定义的路径

将$bgurl保存在数据库即可。

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

Javascript 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
js格式化时间小结
Nov 03 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
详解Angular 开发环境搭建
Jun 22 #Javascript
详解Angular2组件之间如何通信
Jun 22 #Javascript
Angular2 父子组件数据通信实例
Jun 22 #Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 #Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 #Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 #jQuery
详解Vue 2.0封装axios笔记
Jun 22 #Javascript
You might like
php下MYSQL limit的优化
2008/01/10 PHP
有关php运算符的知识大全
2011/11/03 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
Python牛刀小试密码爆破
2011/02/03 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
介绍一下JNDI的基本概念
2013/07/26 面试题
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
中班中秋节活动反思
2014/02/18 职场文书
汽车转让协议书范本
2014/12/07 职场文书
护士求职自荐信
2015/03/25 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript