vue上传图片组件编写代码


Posted in Javascript onJuly 26, 2017

本文实例教大家如何编写一个vue上传图片组件,具体如下

1.首先得有一个[type=file]文件标签并且隐藏,changge事件来获取图片:

<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>

2.触发隐藏的文件标签:(通过原生的click来触发)

document.getElementById('upload_file').click()

3.获取file文件里面的值方法:fileChange($event)

fileChange(el){ 
  if (!el.target.files[0].size) return;//判断是否有文件数量 
  this.fileList(el.target.files);//获取files文件组传入处理 
  el.target.value = ''//清空val值,以便可以重复添加一张图片 
 }

4.处理files文件组

获取传入单个图片文件

fileList(files){ 
   for (let i = 0; i < files.length; i++) { 
    this.fileAdd(files[i]); 
   } 
  }

处理获取到的图片文件,统计文件大小,转图片为base64以供显示

fileAdd(file){ 
   this.size = this.size + file.size;//总大小 
   let reader = new FileReader(); 
   reader.vue = this; 
   reader.readAsDataURL(file); 
   reader.onload = function () { 
    file.src = this.result; 
    this.vue.imgList.push({ 
     file 
    }); 
   } 
  },

5.文件大小换算

bytesToSize(bytes){ 
  if (bytes === 0) return '0 B'; 
  let k = 1000, // or 1024 
   sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 
   i = Math.floor(Math.log(bytes) / Math.log(k)); 
  return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; 
 },

6.拖拽上传

<div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)"> 
   或者将文件拖到此处 
</div>
dragenter(el){ 
  el.stopPropagation(); 
  el.preventDefault(); 
 }, 
 dragover(el){ 
  el.stopPropagation(); 
  el.preventDefault(); 
 }, 
 drop(el){ 
  el.stopPropagation(); 
  el.preventDefault(); 
  this.fileList(el.dataTransfer.files); 
 }

最终效果如下:

vue上传图片组件编写代码

点击打开源码 https://github.com/317482454/vue_upload

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript+xml技术实现分页浏览
Jul 27 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
js查找节点的方法小结
Jan 13 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 #Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 #Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 #Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 #Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 #Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 #Javascript
关于Stream和Buffer的相互转换详解
Jul 26 #Javascript
You might like
同时提取多条新闻中的文本一例
2006/10/09 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
详解如何较好的使用js
2016/12/16 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
机器学习python实战之手写数字识别
2017/11/01 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
民事诉讼授权委托书范文
2014/08/02 职场文书
2014年小学工作总结
2014/11/26 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
村党组织公开承诺书
2015/04/30 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电