vue上传图片组件编写代码

前端之家收集整理的这篇文章主要介绍了vue上传图片组件编写代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

文件数量 this.fileList(el.target.files);//获取files文件组传入处理 el.target.value = ''//清空val值,以便可以重复添加一张图片 }

4.处理files文件

获取传入单个图片文件

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

5.文件大小换算

6.拖拽上传

文件拖到此处

最终效果如下:

点击打开源码 nofollow" href="https://github.com/317482454/vue_upload">https://github.com/317482454/vue_upload

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/37575.html

猜你在找的Vue相关文章