详解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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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实现的比较完善的购物车类
2014/12/02 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python 正则式使用心得
2009/05/07 Python
Python实现的批量下载RFC文档
2015/03/10 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
Pytorch转tflite方式
2020/05/25 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
业务副厂长岗位职责
2014/01/03 职场文书
个人承诺书格式
2014/06/03 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
2014公司年终工作总结
2014/12/19 职场文书
贷款承诺书
2015/01/20 职场文书
明确岗位职责
2015/02/14 职场文书
三方合作意向书范本
2015/05/09 职场文书
仓库管理制度范本
2015/08/04 职场文书
党组织结对共建协议书
2016/03/23 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang