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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
javascript 清除输入框中的数据
Apr 13 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 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
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
进修护士自我鉴定
2013/10/14 职场文书
高中校园广播稿
2014/01/11 职场文书
个人作风剖析材料
2014/02/02 职场文书
法制宣传实施方案
2014/03/13 职场文书
说明书格式及范文
2014/05/07 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
党支部鉴定意见
2015/06/02 职场文书
检讨书之工作不认真
2019/08/14 职场文书