微信小程序/uniapp实现多图上传到七牛云

前端上传的图片很占用服务器资源，因此寻找解决办法看到了七牛云的图片上传功能，由于七牛云只提供了单张图片上传的api，我使用循环的方式实现了前端上传多图的效果。实现过程中踩到了两个坑值得记录一下，第一是循环中的异步回调函数导致的key和token错位，其次就是回调函数的作用域问题。

前端使用的是dcloud的uniapp框架，大致结构与微信小程序没有差别，基本上小程序的api在uniapp中也有对应的api。

前端使用

首先下载七牛云提供的前端sdk，解压到本地将 qiniuUploader.js 引入到需要上传图片的页面使用。

这里我放到了components/qiniuUploader目录下。

后端token生成

七牛云上传要求由key生成一个上传凭证token，token有3中方法生成并给七牛云验证。第一就是由其他程序生成token后在调用时将token一起上传，第二是在前端构造一个token生成函数，第三是将后端生成token的api地址发给七牛。无论通过那种方式，都要求key和token要一一对应起来，否则将报403错误。

我采用的是第一种方法，由后端生成key和token发送给前端，前端接收后在调用时将收到的token和key发给七牛云即可。后端采用phalapi开源php框架，引入了七牛云服务器端的sdk后，重写了一下便能引入实现了。

use App\Common\Qiniu;
/**
     * 七牛图片文件上传
     * @desc 只能上传单个图片文
     * @return array token  返回七牛云上传凭证token
     * @return string key  返回生成token的key
     */
    public function qiniu() {
        $rs = array();
        $rs['key'] = md5(uniqid(microtime(true),true));//生成唯一字符串
        $uploader = new Qiniu('七牛云ak’,'七牛云sk');
        $rs['token'] = $uploader->uploadToken('upload',$rs['key']);
        return $rs;
    }