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
}