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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
JSON 数据格式详解
Sep 13 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
vue点击按钮动态创建与删除组件功能
Dec 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
记录几个javascript有关的小细节
2007/04/02 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
python实现合并两个数组的方法
2015/05/16 Python
Python中的localtime()方法使用详解
2015/05/22 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
Pandas分组与排序的实现
2019/07/23 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
中专自荐信
2013/10/13 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
护理工作感言
2014/01/16 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
超市督导岗位职责
2015/04/10 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS