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 css样式操作代码(批量操作)
Oct 09 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
详解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
2006/11/25 PHP
Zend 输出产生XML解析错误
2009/03/03 PHP
php分页函数示例代码分享
2014/02/24 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
document.write的几点使用心得
2014/05/14 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
解读Python中degrees()方法的使用
2015/05/18 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
python生成excel的实例代码
2017/11/08 Python
浅析Python函数式编程
2018/10/06 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
Python 文件数据读写的具体实现
2020/01/24 Python
Python chardet库识别编码原理解析
2020/02/18 Python
卫生标语大全
2014/06/21 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
平安家庭事迹材料
2014/12/20 职场文书
2015年党员承诺书
2015/01/21 职场文书
2017春节晚会开幕词
2016/03/03 职场文书