图片上传使用post_JS使用尾递归控制图片上传顺序

尾递归

函数调用自身，称为递归。如果尾调用自身，就称为尾递归。

递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误(stack overflow)。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。

选择递归实现的原因

因为图片上传是异步的，如果使用for循环来批量上传的话，则图片上传的顺序是无法得到保证。

eg :

从图中可以看出，后一张图片并没有等前一张图片上传完成之后才开始上传，因为如果图片的体积大小不一，完全无法掌握。

因此我们需要在上一张图片完成之后开始调用函数，继续接着上传，由于上传的图片数量不一定，使用尾递归是一个非常不错的选择。

思路

先拿到图片的本地数据(一般是一个数组形式)。然后我们可以定义一个数组指针。初始化为1(先上传第一张)。然后每次执行递归的时候都让这个指针加1(上传下一张)，至于递归的出口，则可以在图片上传完成之后，直接return 出去(根据指针是否小于数组的长度来判断)。

值得注意的一点就是这个指针要定义在递归函数的外面，否则每次递归执行都会重新定义这个指针。

代码实现

在满足条件里写异步上传图片，因为指针是 0 的原因，它会先上传第一张，然后每次调用它都会加 1，当全部上传完成之后，此时 i 已经不小于数组的长度了 ，满足函数终止执行的条件。代码执行完毕。

/** * 上传图片 */ uploadImg(imgs) { // imgs为要上传的图片列表 let i = 0 let upImg = api.upImg let that = this function myForUpload() { if (i < imgs.length) { wx.uploadFile({ url: 'http://upload.qiniup.com/', // 仅为示例，非真实的接口地址 filePath: imgs[i], name: 'file', formData: { // 10年token，简单好用 token: '后端返回的token' }, success: ({ data }) => { let hash = JSON.parse(data).hash that.data.sendImg.push(`${upImg}${hash}`) that.setData({ sendImg: that.data.sendImg })i++ return myForUpload() } }) } else { return } } myForUpload() },

结果展示

从图中可以看出，每一次上传都是在上一次完成的基础上再次进行，完美保障了图片上传的顺序性。

如果对递归不太熟悉的可以看我之前写的两篇文章：

JS之使用递归实现for循环

JS之实现深度拷贝