详解vue 图片上传功能


Posted in Javascript onApril 30, 2019

这次做了vue页面的图片上传功能,不带裁剪功能的!

首先是html代码,在input框上添加change事件,如下:

<ul class="clearfix">
        <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'>
          <img :src="item">
        </li>
        <li style="position:relative" v-if="imgs.length>=6 ? false : true">
          <img src="../../assets/img/addimg.png"><input class="upload" @change='add_img' type="file">
        </li>
</ul>

我这里做了图片数量的限制,最多6张。

然后是data数据,如下:

data () {
  return {
    imgs: [],
    imgData: {
      accept: 'image/gif, image/jpeg, image/png, image/jpg',
    }
  }
 }

imgs数组是放图片路径的,页面显示图片就是循环这个数组,imgData是判断图片类型的。

接下来是最重要的methods里面的方法,具体如下:

add_img(event){ 
      let reader =new FileReader();
      let img1=event.target.files[0];
      let type=img1.type;//文件的类型,判断是否是图片
      let size=img1.size;//文件的大小,判断图片的大小
      if(this.imgData.accept.indexOf(type) == -1){
        alert('请选择我们支持的图片格式!');
        return false;
      }
      if(size>3145728){
        alert('请选择3M以内的图片!');
        return false;
      }
      var uri = ''
      let form = new FormData(); 
      form.append('file',img1,img1.name);
      this.$http.post('/file/upload',form,{
        headers:{'Content-Type':'multipart/form-data'}
      }).then(response => {
        console.log(response.data)
        uri = response.data.url
        reader.readAsDataURL(img1);
        var that=this;
        reader.onloadend=function(){
          that.imgs.push(uri);
        }
      }).catch(error => {
        alert('上传图片出错!');
      })  
},

首先是获取你选择的图片,判断图片的类型和大小,然后以form表单的形式提交到后台,后台会返回给你这个图片的线上路径,你把后台返回的图片路径push到图片数组里面就可以了。

一般情况下还有删除图片的方法,就是把图片数组里的那个路径删除掉,把数据提交到后台,告诉后台删除了哪张图片就可以了。

以上所述是小编给大家介绍的vue 图片上传功能详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
vue移动端屏幕适配详解
Apr 30 #Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 #Javascript
微信小程序时间戳转日期的详解
Apr 30 #Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 #Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 #Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 #Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 #Javascript
You might like
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
js获取class的所有元素
2013/03/28 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
图文详解WinPE下安装Python
2016/05/17 Python
儿童学习python的一些小技巧
2018/05/27 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
python中JWT用户认证的实现
2020/05/18 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
软件测试工程师笔试题带答案
2015/03/27 面试题
民事诉讼代理授权委托书
2014/10/11 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
学生检讨书
2015/01/27 职场文书
大连导游词
2015/02/12 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python