详解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 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
JSON取值前判断
Dec 23 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
JavaScrip数组去重操作实例小结
Jun 20 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之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
php生成html文件方法总结
2014/12/01 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
python能开发游戏吗
2020/06/11 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
python把一个字符串切开的实例方法
2020/09/27 Python
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
企业宣传工作方案
2014/06/02 职场文书
学校督导评估方案
2014/06/10 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
Oracle笔记
2021/04/05 Oracle
python实现A*寻路算法
2021/06/13 Python