vue点击按钮上传图片_Vue2.0 实现移动端图片上传功能

本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果，无需加载其他组件。

效果图如下：

1.DOM代码

1.1input标签

由于我们是通过input标签的方式进行图片上传的，但是input标签的样式有点丑，所以我们隐藏该样式display: none

1.2添加图片按钮

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

//按钮中的图片是一个icon字体图标

添加图片

1.3图片预览区域

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

图片(最多6张，还可上传张)

• //del删除样式，icon字体图标需要自己找哦

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

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

图片(最多6张，还可上传张)

2.JS代码块

tips：此处的提示弹窗调用的Y-DUI的提示框，可以改成自己的提示框。

export default {

name: "Feedback",

data() {

return {

showFace: false,

imgList: [],

size: 0,

limit:6, //限制图片上传的数量

tempImgs:[]

}