实现上传图片功能

小程序-实现上传图片功能

1：在data中设置三个变量：

​ 1）src空数组（用来存放用户上传的图片）

​ 2）img_count默认值为0，用来记录用户上传图片的数量

​ 3）wechat默认值为空，用来存放用户的微信号码

2：在一个label标签中写入{{img_count}}显示当前图片的熟练 /2是表明最多可上传两张图片

3：在下面的一个label里面循环展示src数组里的图片,在label里面通过vue的语法v-for来循环

​ 1）v-for="(item,index) in src"

​ item指数组里的每一个图片项的链接，index指当前遍历到的数组里元素的索引

4：在该label标签下添加一个img标签，因为src是一个变量，所以在前面加入 ：（冒号）来表明这个变量，item就是指每张图片的链接

5：判断用户添加照片的数量

​ 1）在下面添加一个新的label标签，在label标签里添加vue的判断语句v-if="",判断的条件是img_count<2,当用户上传图片数量小于2时，显示默认照片

6：在图片样式下面添加一个新的div标签对，用来存放用户的微信号码

​ 1）在里面新建一个input文本框，并通过v-model绑定wechat变量

效果：

7：实现点击加号，添加图片的功能

​ 1）在相应的js文件内添加一个methods函数[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

​ 2）在这个函数里添加上传图片的方法uploadPicture()

上传图片使用微信小程序自带的API(wx.chooseImage)

​ 3）const tempFilePaths = res.tempFilePaths 指用户上传图片的路径

​ 4）通过that.src.push(tempFilePaths)获取图片路径保存到src数组中

8：在图片添加标签上添加点击事件调用uploadPicture()方法

效果：

9：实现上传图片右上角计数功能

​ 1）需要实时监控上传图片的数量，在watch函数里添加需要监控的变量的同名方法

​ 2）将图片的数量保存到data函数创建的retun方法下的img_count这个变量里

效果：

js文件代码：

wxml文件代码：