vue.js 上传图片实例代码

 更新时间:2017年06月22日 16:24:42   作者:童蒙_  
这篇文章主要介绍了vue.js 上传图片实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

最近爱上了用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中keep-alive的两种应用方式

    Vue中keep-alive的两种应用方式

    这篇文章主要介绍了Vue中keep-alive的两种应用方式,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • VueCli3.0中集成MockApi的方法示例

    VueCli3.0中集成MockApi的方法示例

    这篇文章主要介绍了VueCli3.0中集成MockApi的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】

    vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】

    这篇文章主要介绍了vue使用自定义事件的表单输入组件用法,结合实例形式详细分析了vue.js日期组件与货币组件相关操作技巧及注意事项,需要的朋友可以参考下
    2020-06-06
  • vue-iview动态新增和删除的方法

    vue-iview动态新增和删除的方法

    这篇文章主要为大家详细介绍了vue-iview动态新增和删除的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 详解vue2.6插槽更新v-slot用法总结

    详解vue2.6插槽更新v-slot用法总结

    在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。这篇文章主要介绍了详解vue2.6插槽更新v-slot用法总结,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-03-03
  • 在Vue中使用echarts的方法

    在Vue中使用echarts的方法

    这篇文章主要介绍了Vue中使用echarts的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • 详解Vue组件之间的数据通信实例

    详解Vue组件之间的数据通信实例

    本篇文章主要介绍了详解Vue组件之间的数据通信实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

    Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

    这篇文章主要介绍了如何在 Vue 中集成 Mozilla/PDF.js ,实现自定义的 PDF 预览器,以及给被预览的 PDF 添加水印
    2021-01-01
  • mpvue将vue项目转换为小程序

    mpvue将vue项目转换为小程序

    这篇文章主要介绍了mpvue将vue项目转换为小程序的相关资料及mpvue开发流程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue源码探究之状态初始化

    Vue源码探究之状态初始化

    这篇文章主要介绍了Vue源码探究之状态初始化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论