Vue2.0怎么实现移动端图片上传功能

　　介绍

这篇文章主要介绍Vue2.0怎么实现移动端图片上传功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

效果图如下:

<强> 1. dom代码

1.1输入标签

,由于我们是通过输入标签的方式进行图片上传的,但是输入标签的样式有点丑,所以我们隐藏该样式显示:没有

& lt; input  @change=癴ileChange(事件)美元“,类型=癴ile", id=皍pload_file", multiple /祝辞

1.2添加图片按钮

,如果需要用到此方法,只需要在你的上传按钮的地方调用@click=癱hooseType”即可,其他部分代码为样式布局仅供参考。

, & lt; div 类=癮dd", @click=癱hooseType"比; 　　,& lt; div 类=癮dd-image",对齐=癱enter"比; 　　& lt;才能小姐:类=癷con-camera"祝辞& lt;/i>,//按钮中的图片是一个图标字体图标 　　& lt;才能p 类=癴ont13"在添加图片& lt;/p> 　　,& lt;/div> 　　& lt;/div>

1.3图片预览区域

,如果需要用到此方法,只需要在你的预览区域进行v代表循环输出上传的图片集合即可。

& lt; div 类=癮dd-img", v-show=癷mgList.length"比; 　　,& lt; p 类=癴ont14"在图片(最多6张,还可上传& lt; span  v-text=?-imgList.length"祝辞& lt;/span>张)& lt;/p> 　　,& lt; ul 类=癷mg-list"比; 　　& lt;才能li  v=?url,指数),拷贝imgList"比; 　　,,& lt; img 类=癲el", src=https://www.yisu.com/zixun/assets/img/home/btn_clean.png " @click.stop=" delImg(索引)"/>//▽删除样式、图标字体图标需要自己找哦 　　: 　　李 　　 　　

%201.4图片预览区域——拓展(1.3为简单运用,如果有时间后续会将完整的案例上传)

,如果需要用到此方法,只需要在你的预览区域进行v代表循环输出上传的图片集合即可。本案例还运用的Y-DUI的lightbox组件,如有需要请参照图片预览的调用方式。此处,也调用了vue的懒加载和css背景图自适应的方法。