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 getElementsByTagName
Jan 31 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Javascript MD4
2006/12/20 Javascript
js加强的经典分页实例
2013/03/15 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
Python学习笔记_数据排序方法
2014/05/22 Python
Python中格式化format()方法详解
2017/04/01 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python http基本验证方法
2018/12/26 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python如何读取bin文件并下发串口
2019/07/05 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python_mask_array的用法
2020/02/18 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
男性健康日的活动方案
2014/08/18 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
幼师求职自荐信
2015/03/26 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS