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判断背景图片是否加载成功使用img的width实现
May 29 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
jquery移动节点实例
Jan 14 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
javascript实现的listview效果
2007/04/28 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python字符串替换的2种方法
2014/11/30 Python
python实现线程池的方法
2015/06/30 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Python中常用的os操作汇总
2020/11/05 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
运动会广播稿20字
2014/02/18 职场文书
公证委托书标准格式
2014/09/11 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
团代会闭幕词
2015/01/28 职场文书
新学期主题班会
2015/08/17 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript