详解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 相关文章推荐
不懂JavaScript应该怎样学
Apr 16 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
实现高性能javascript的注意事项
May 27 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 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
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
微信支付开发维权通知实例
2016/07/12 PHP
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
Python 爬虫图片简单实现
2017/06/01 Python
实例讲解Python3中abs()函数
2019/02/19 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python实现数字炸弹游戏
2020/07/17 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
硕士研究生自我鉴定范文
2013/12/27 职场文书
装饰活动策划方案
2014/02/11 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
行政申诉状范文
2015/05/20 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
利用Python实时获取steam特惠游戏数据
2022/06/25 Python
DQL数据查询语句使用示例
2022/12/24 MySQL