在小程序上用七牛存储

TLDR

// 选到图片
wx.chooseImage({
    count: 1,
    success: function(res) {
        var filePath = res.tempFilePaths[0];
        //上传
        wx.uploadFile({
            url: 'https://up.qbox.me',//如果是华北一请用up-z1.qbox.me
            filePath: filePath,
            name: 'file',
            formData: {
                'key': filePath.split('//')[1],
                'token': uptoken
            },
            success: function(res) {
                var data = JSON.parse(res.data);

                self.setData({
                    imageUrl: `https: //xxx.qnssl.com/${data.key}`
                })
                //do something
            },
            fail(error) {
                console.log(error)
            },
            complete(res) {
                console.log(res)
            }
        });
    }
})

最近公司前端抛开了操作DOM的jQuery转头用Vue，对于一个曾经写了不少客户端代码的我来说，真的满心欢喜。很喜欢他一切UI都是由数据控制的思路。

但是七牛的JS SDK体积庞大，而且做的事情太多，虽然在传统的web上用起来还算顺手。但是一旦引入一些其他框架就显得有点格格不入了。在和Vue如出一辙的微信小程序中更是如此。

那问题来了，小程序木有七牛的SDK啊，他的js sdk操作dom小程序也没法用。但我还想用七牛。

怎么办？

七牛sdk最终做的也就是上传文件，那我们知道他最终上传的格式就可以随心所欲了。

看一下七牛官方文档： 里面有很详细的描写：

上传图片要用HTTP POST一个 表单到upload.qiniu.com，而且必须的字段有两个：

token从自己服务器拿到，详情看这里。

file就是你要上传的文件咯。

基于这样的思路，感觉豁然开朗呀。

这时候我们来看一眼微信小程序的文档：

用脊柱就能写出来如下的代码：

wx.uploadFile({
  url: 'https://upload.qiniu.com',
  filePath: filePath,
  name: 'file',
  formData: {
    'key': filePath.split('//')[1],
    'token': uptoken
  },
  success: function(res) {
    var data = JSON.parse(res.data);
    //do something
  },
  fail(error) {
    console.log(error)
  }
});

开心的Run一下，你会得到一个

uploadFile:fail Error: Hostname/IP doesn't match certificate's altnames: "Host: up-z1.qiniu.com. is not in the cert's altnames: DNS:*.qbox.me, DNS:qbox.me"

qbox是啥？在网上搜查一番，发现qbox.me就是七牛。

换了域名以后，搞定~

中间遇到的一些坑：

• qbox.me是qiniu.com的本体，SSL证书也是前者的
• qiniu上传遇到401是uptoken没搞定
• qiniu上传遇到400，估计是域名错了，或者是表单有问题
• 如果在七牛后台选了华北1节点，那么上传要用up-z1而不是up，不然一样400
• 小程序所有的网络请求要用https，发布的话要在后台设置白名单，白名单一个月只能修改三次
• 小程序wx.uploadFile接口中name字段是会拼在formData里作为filePath的key的，而qiniu要求必须用file作为上传文件的key

var upload = {
  filePath: ChoosenFilePath,
  name: 'file'//qiniu上传一定要写`file`，乱改就没法上传了
};
wx.uploadFile(upload);
//等价于
var formData = {
  upload.name: upload.filePath
}