小程序实战之图片上传

一、前言

本人是才刚学计算机的小白，想起前段时间刚接触微信小程序时遇到的一个难点，现在想起来也觉得挺有趣的，于是便记录了下来。

Ps：有强迫症勿看，由于是新手之作，所以在命名以及方法等方面有很多不足

二、准备

因为需要利用到云开发，所以在创立小程序时不能用测试号的APPID，其次我们需要开通云开发等之类的，直接上官网链接：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/getting-started.html

三、页面布置

我这边定义了两个组件，一个用于触发增加照片，一个用于触发上传图片，另外还循环了三个组件，用来显示图片。

至于样式方面，因为一点也不懂，所以只是拿了少量开源的小程序，综合起来，慢慢调试（似乎漏了点什么，调试的时候样式与下图不对）

四、Js编写

这是增加图片的js代码，将获取到的图片链接放在send变量中（为什么是用对象格式呢，感觉这便于后期扩展，假设还有其余东西的话），再用that.setData刷新界面。（API：https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html

）

这是上传图片的代码，利用了小程序提供的API，但在前面我对文件的路径做出了随机数，避免图片被覆盖。

（API：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/storage/uploadFile.html）

五、问题扩展

这只是一开始的情况，那假设要上传几张图片呢？

一开始我冒出的想法是利用循环，譬如：

但这实际上并没有用处，由于上传图片的任务是需要时间的，小程序并不会等待它完成后才执行别的操作。

这是最垃圾的草图，没错，就是利用这种笨办法，我那时竟然尝试了一篇，不说代码显得很失败，仅说这个方法也还是失败了，if的内容总是在判断后解决，而if被丢在后端去解决了，程序还是照常的运转，这就是异步调用

或者许得想办法让它停留下来，于是

相似于这样的代码，将函数放在推迟执行的API中，这样子看样子似乎处理了问题，但在实际情况下，却是治标不治本，5G时代在那个时候根本还没来临，即使是真正的5G来临了，那时的人们能否会愿意等待几秒钟呢？

这是在经历了百般折磨之后停下来休息后想到的，似乎这样子也不错：首先直接获取需要上传照片的数量，接着用循环进行上传，但在其中加入了用来判断已上传数量的变量up，因为up==k的判断放在循环if里面，所以不会造成提前循环三次的情况，这只会在每次上传完图片后才进行判断，只有k==up时，证实上传完毕后，才会执行其余步骤。

后记

如果生活欺骗了你，

不要悲伤，不要心急！

忧郁的日子里须要镇静：

相信吧，快乐的日子将会来临！