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 相关文章推荐
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 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编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php学习之运算符相关概念
2011/06/09 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
django的csrf实现过程详解
2019/07/26 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
python实现图像外边界跟踪操作
2020/07/13 Python
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
毕业生幼师求职自荐信
2013/10/01 职场文书
军训心得体会
2013/12/31 职场文书
财务总监管理职责范文
2014/03/09 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
学前班学生评语
2014/12/29 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS