nodejs 微信网页api上传图片后转发到阿里云存储

最近开始维护前人留下的 nodejs 微信项目,匆匆看了一些相关书籍,现在需要实现微信端调用 [JS SDK] 来实现多媒体文件的上传,并转发到阿里云服务器的云存储上。

需求背景

当前的微信项目需要上传图片的功能,由于展示端用的是阿里云存储,于是也要学习如何上传到云存储上。秉承实践能更好掌握技能的旨意,开干开干!


阿里云存储须知

阿里云账号大家都知道,云存储大家可以按 [云存储sdk] 创建自己的存储。按文件上传api的说明,我们需要阿里云存储上4个两个,分别是:

  • region:申请OSS服务时的区域,例如’oss-cn-hangzhou’。完整的区域列表可以在 [OSS服务节点] 查看。
  • accessKeyId:阿里云的accessKeyId
  • accessKeySecret:阿里云的accessKeySecret
  • bucketName:创建的bucket名称

了解了以上四个变量我们就可以开始实现我们的需求功能了。


功能开发

微信端api的调用大家应该都很清楚了,不清楚的可以了解 [微信api] 。首先我们在前台调用微信接口上传文件,微信上传的图片只保存3天,所以将其转发到云存储中。
前端JS代码如下:

wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
        //sizeType: ['original'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function (res) {
            var localId = res.localIds[0]; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
            wx.uploadImage({
                localId: localId,
                success: function(res) {
                    var val = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="+_accessToken+"&media_id="+res.serverId;//获取上传后的网络地址,_accessToke是那个7200秒获取的token。
                    $.ajax({
                        type: "GET",
                        data: {url: val,userId: _userId,name:'themeImage.jpg',timestamp:_timestamp},//一些乱七八糟的值
                        dataType: 'json',
                        url: "upload",
                        beforeSend: function (request) {
                            request.setRequestHeader('X-CSRF-Token', _csrf);//微信ajax方法需要的token,post方法需要,这边也写着以便大家了解
                        },
                        success: function (result) {
                            $('.cover-pic')
                                .find('img')
                                .attr('src', result.url);//展示一下上传到存储的图片
                        }
                    });

                },
                fail: function(res) {
                    alert(JSON.stringify(res));
                }
            });

        }
    });

后台nodejs代码思路:首先获取上传到微信的远程文件,将其以流的形式保存到本地文件中,(其实阿里云存储可以直接以流的形式上传文件,但我实践的时候总有些问题,希望成功的人能留言指教我一下,感激感激!)再通过存储接口上传,实现代码如下:

首先我们进行阿里云存储的配置,四个参数是上文中提到的:

var co = require('co');
var OSS = require('ali-oss');
var client = new OSS({
    region: 'your region',
    accessKeyId: 'your accessKeyId',
    accessKeySecret: 'Your accessKeySecret',
    bucket: 'your bucket'
});

转发功能实现代码:

var fs = require('fs');
var request = require('request');
app.get('/upload', function (req, res) {
     //这些都是我的文件命名规则,大家可以忽略
    var userId = req.query.userId;
    var timestamp = new Date().getTime();
    var name = req.query.name;
    var path = 'img_tmp/'+userId+'_'+timestamp+'_'+name;
    var key = userId+'/'+timestamp+'/'+name;

    //获取远程文件,并以流写入文件
    var url = req.query.url;
    var stream = request(url).pipe(fs.createWriteStream(path));

     //流写入完毕
    stream.on('finish', function () {
        co(function* () {
            var result = yield client.put(key, path);
            console.log(result);
            res.json(result);
        }).catch(function (err) {
            console.log(err);
        });
    });
});

最后我们就实现了在微信公众号网页上传图片并转发到阿里云存储的功能了,大家有问题可以留言。也请大家提提好的建议,共同进步!

你可能感兴趣的:(nodejs填坑之路)