vue.js 上传图片实例代码
2017-06-22 16:24
911 查看
最近爱上了用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保存在数据库即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue.js 2.0 移动端拍照压缩图片预览及上传实例
- vue.js 图片上传并预览及图片更换功能的实现代码
- cropper js基于vue的图片裁剪上传功能的实现代码
- php ajax无刷新上传图片实例代码
- js图片上传预览(这是还没有上传到服务器的时候进行的图片预览代码)
- c#多图片上传并生成缩略图的实例代码
- JS中图片缓冲loading技术的实例代码
- js点击更换背景颜色或图片的实例代码
- js实现IE7图片上传预览的功能代码
- JS图片根据鼠标滚动延时加载的实例代码
- 支持firefox10和IE的上传预览图片js代码
- asp.net上传图片并作处理水印与缩略图的实例代码
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
- swfupload ajax无刷新上传图片实例代码
- 图片上传之前检查大小、尺寸、格式并预览的js代码
- js 图片上传前大小长宽验证代码
- js实现上传图片类型大小的检测代码
- javascript实现上传图片并预览的效果代码实例
- JS返回上一页实例代码通过图片和按钮分别实现
- js点击更换背景颜色或图片的实例代码