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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
jquery 插件学习(六)
Aug 06 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
纯js实现动态时间显示
Sep 07 Javascript
vue设置默认首页的操作
Aug 12 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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存储过程调用实例代码
2013/02/03 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
犀利的js 函数集合
2009/06/11 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python实现的栈(Stack)
2018/01/26 Python
python简易远程控制单线程版
2018/06/20 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
什么是封装
2013/03/26 面试题
护理目标管理责任书
2014/07/25 职场文书
公司更名通知函
2015/04/24 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
Golang 编译成DLL文件的操作
2021/05/06 Golang