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 | string | 上传凭证 |
| file | file | 文件 |
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
}
