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模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
js调试工具Console命令详解
Oct 21 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
vue的项目如何打包上线
Apr 13 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入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
JS重载实现方法分析
2016/12/16 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python应用文件读取与登录注册功能
2019/09/23 Python
详解Django admin高级用法
2019/11/06 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
Python使用Matlab命令过程解析
2020/06/04 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
英语专业毕业生自荐信
2013/10/28 职场文书
婚礼答谢词
2015/01/04 职场文书
2015年征兵工作总结
2015/07/23 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle