vue上传图片组件编写

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

在线查看地址：http://jqvue.com/demo/vue_upload/demo.html

编写一个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 1024sizes = ['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上传图片组件编写相关推荐

vue上传图片组件（支持拖拽文件夹上传）
点击打开源码 https://github.com/317482454/vue_upload 在线查看地址:http://jqvue.com/demo/vue_upload/demo.html 1.获 ...
用vue优雅地编写UI组件的几条指导原则
前言最近在尝试写几个UI组件,并通过阅读element-ui的源码,与其反复比较,然后认真思考,最后总结出一些自己的一些心得和体会.在造轮子的过程中,既巩固了html,css,js基础,又加深了对v ...
vue 上传图片视频组件，可拍照选择照片，解决苹果手机拍照旋转问题
vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题参考文章: (1)vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题 (2)https://www.cnblogs. ...
Vue组件编写之Alert提示框组件编写
Alert提示框的vue组件编写最近一直学习vue,跟着视频敲代码,敲了两三个组件后,终于对编写组件有一个大致的思路了,以下通过编写一个alert提示框组件大致梳理一下我编写组件的思路. 主要分为三 ...
15 Vue中子组件样式的绑定和行内样式模版编写
[基础]模板样式绑定2-进阶场景子组件的样式绑定如何区分父子组件子组件使用样式的小坑行内样式的编写场景这篇文章继续学习Vue的模板样式绑定.上篇文章你已经对Vue中的样式绑定有一个基本了 ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
使用Tape和Vue Test Utils编写快速的Vue单元测试
by Edd Yerburgh 埃德·耶堡(Edd Yerburgh) 使用Tape和Vue Test Utils编写快速的Vue单元测试 (Write blazing fast Vue unit t ...
开源Vue表格组件，表格插件源码
开源Vue表格组件,表格插件源码前言: 关于html里面原生的table,通常满足不了程序员的要求.所以开发了一款表格插件,其功能有: 1 导入json格式数据后,自动填充表格.表格长宽自适应.排 ...
构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...

vue上传图片组件编写

vue上传图片组件编写相关推荐

最新文章

热门文章