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

发表于 | 分类于 |

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
wx.chooseImage({
               count: 1,
               sizeType: ['original', 'compressed'],
               sourceType: ['album', 'camera'],
               success: function(res) {
                   $scope.localIds = res.localIds; //存储localId供本地预览
                   wx.uploadImage({
                       localId: res.localIds[0],
                       isShowProgressTips: 1,
                       success: function(res) {
                           WishData.mediaId = res.serverId; //图片上传成功后保存serverId然后发给后台，让后台根据serverId去微信服务器下载对应的图片
                       }
                   });
               }
           });

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var client = new qiniu.rs.Client();
var random_key = Math.random().toString(36).substr(2, 15); //生成一个随机字符串来给图片命名
//调用七牛 fetch 接口，具体用法参照文档
client.fetch('http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=' + req.session.apptoken + '&media_id=' + req.body.mediaId, 'gdutgirl', random_key, function(err, ret) {
           if (err) {
               console.log(err.error);
               next();
           } else {
               console.log('图片请求成功');
               var url = qiniu.rs.makeBaseUrl('7xnxuw.com1.z0.glb.clouddn.com', random_key); //生成图片的可访问url
               req.body.imgurl = url;
               next();
           }

       });

文档：

微信上传和下载多媒体文档
微信 JS SDK 说明文档
七牛 fetch 接口说明文档