使用微信JSSDK上传图片到七牛

文章目录

1. 1. 总体思路
   1. 1.1. 调用微信 chooseImage 接口，成功后调用 uploadImage 接口
   2. 1.2. 在后台使用七牛的 fetch 接口向微信服务器请求文件并存入自己的七牛仓库

总体思路

在微信下选好图片后将图片上传到微信服务器，在后端使用微信服务器返回的图片 serverId 加上调用接口的 access_token 通过七牛的 fetch 接口向微信服务器下载多媒体文件的接口请求图片的二进制流，然后保存至自己七牛账号内的特定 bucket。

调用微信 chooseImage 接口，成功后调用 uploadImage 接口

wx.ready(function () {
            // 5.1 拍照、本地选图
            var images = {
                localId: [],
                serverId: []
            };
            document.querySelector('#chooseImage').onclick = function () {
                wx.chooseImage({
					count:1,
                    success: function (res) {
                        images.localId = res.localIds;
						$(".weui_uploader_file").show().css('background-image', 'url(' + images.localId[0] + ')');
//                        alert('已选择 ' + res.localIds.length + ' 张图片');
                    }
                });
            };

            // 5.3 上传图片
            document.querySelector('#uploadImage').onclick = function () {
                if (images.localId.length == 0) {
                    alert('请先选择图片');
                    return;
                }

                $.showLoading("请稍等...");
                var i = 0, length = images.localId.length;
                images.serverId = [];
                function upload() {
                    wx.uploadImage({
                        localId: images.localId[i],
                        success: function (res) {
                            i++;
                            //alert('已上传：' + i + '/' + length);
                            console.log(res);
                            images.serverId.push(res.serverId);

                            var url = "<?php echo base_url('vote/home/fetch_url_to_qiniu'); ?>";
                            $.get(url, {'media_id': res.serverId,'memo': $('.weui_textarea').val()}, function (response) {
                                $.hideLoading();
                                var data = $.parseJSON(response);
                                if (data.ret == 0) {
                                    $.toast(data.msg);
                                    window.location.href = "<?php echo base_url('vote/home/vote_list'); ?>";
                                } else {
                                    $.toast("操作失败", "forbidden");
                                    $.noti({
                                        text: data.msg,
                                        time: 3000
                                    });
									return;
                                }
                            });

                            if (i < length) {
                                upload();
                            }
                        },
                        fail: function (res) {
                            alert(JSON.stringify(res));
                        }
                    });
                }

                setTimeout(function () {
                    upload();
                }, 1000);

            };

            wx.error(function (res) {
                console.log(res.errMsg);
            });
        });

在后台使用七牛的 fetch 接口向微信服务器请求文件并存入自己的七牛仓库

下面是七牛PHP fetch接口demo

<?php
require_once __DIR__ . '/../autoload.php';
use Qiniu\Auth;
use Qiniu\Storage\BucketManager;
$accessKey = 'Access_Key';
$secretKey = 'Secret_Key';
$auth = new Auth($accessKey, $secretKey);
$bmgr = new BucketManager($auth);
$url = 'http://php.net/favicon.ico';
$bucket = 'Bucket_Name';
$key = time() . '.ico';
list($ret, $err) = $bmgr->fetch($url, $bucket, $key);
echo "=====> fetch $url to bucket: $bucket  key: $key\n";
if ($err !== null) {
    var_dump($err);
} else {
    echo 'Success';
}

其中需要特别注意的地方是，通过微信返回的 serverId 去微信服务器下载图片的接口微信公众号和微信企业号是不一样的（微信企业号开发文档没有提供媒体下载接口以为是同公众号下载接口一样，结果总是提示 aceess_token）

• 微信公众号上传下载媒体接口，官方文档

• 微信企业号上传下载媒体接口，上传接口官方文档

  下载接口：https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID

  微信 JSSDK 说明文档
  七牛 fetch 接口说明文档
  七牛 PHP-SDK fetch 接口demo