為了微信小程序客服端實(shí)現(xiàn)自拍視頻能夠分享給多個(gè)好友，我們需要把小程序自拍的視頻存儲(chǔ)到服務(wù)器，而阿里云在性能和速度上比較不錯(cuò)，所以我們選擇了阿里云作服務(wù)器。

第一步。微信小程序項(xiàng)目創(chuàng)建

1.到https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 下載微信小程序IDE，我們使用的是wechat_web_devtools_0.11.122100.dmg。

2.微信小程序的項(xiàng)目建立參考https://mp.weixin.qq.com/debug/wxadoc/dev/index.html。

第二步：在PC端測(cè)試微信小程序的上傳接口

wx.uploadFile(OBJECT)，將本地資源上傳到開發(fā)者服務(wù)器。如頁面通過 wx.chooseImage 等接口獲取到一個(gè)本地資源的臨時(shí)文件路徑后，可通過此接口將本地資源上傳到指定服務(wù)器?？蛻舳税l(fā)起一個(gè) HTTPS POST 請(qǐng)求，其中 content-type 為 multipart/form-data 。具體的https數(shù)據(jù)流可以用wireshark抓取。

做測(cè)試的時(shí)候可以先開啟小程序開發(fā)工具的不校驗(yàn)域名功能。如果有校驗(yàn)域名的話，請(qǐng)先到 微信小程序的開發(fā)設(shè)置，設(shè)置uploadFile合法域名。

參考https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html#wxuploadfileobject

第三步：在PC端測(cè)試阿里云JS SDK的上傳接口

參考https://github.com/aliyun-UED/aliyun-sdk-js?spm=5176.7926468.195975.2.ZJcqCx。

測(cè)試之后可以在阿里云服務(wù)器端查看文件是否上傳成功。

移植阿里云JS SDK到微信小程序工程，發(fā)現(xiàn)有很多的語法兼容需要修改，在對(duì)比阿里云的上傳PostObject(參考https://help.aliyun.com/document_detail/31988.html?spm=5176.product31815.6.875.5AzInj)和微信小程序的上傳接口，其實(shí)只要在微信小程序上傳API （wx.uploadFile）的OBJECT參數(shù)formData：增加'key': 'OSSAccessKeyId': 'policy':'Signature':'success_action_status':,這五個(gè)字段信息。

第四步。試用POSTMAN測(cè)試上傳視頻文件到阿里云

參數(shù)設(shè)置

為快速獲取 policy，Signature，這兩個(gè)字段的數(shù)據(jù)，我們可以參考（https://help.aliyun.com/document_detail/31988.html?spm=5176.product31815.6.875.5AzInj ）oss-h5-upload-js-direct.zip 這個(gè)例子，通過chrome 開發(fā)者選項(xiàng)，查看這兩個(gè)字段的數(shù)據(jù)。

第五步：試用POSTMAN參數(shù)配置到微信小程序上傳視頻文件到阿里云

微信小程序端API 配置

其中對(duì)應(yīng)Postman的測(cè)試參數(shù)， aliyunFileKey='${filename}',accessid='在阿里云OSS申請(qǐng)的

1. accessKeyId',policyBase64='eyJleHBpcmF0aW9uIjoiMjAyMC0wMS0wMVQxMjowMDowMC4wMDBaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF1dfQ',signature='PSWlNPrNjU2xdEiwFLiOBa2ieEU='。

第六步：移植阿里云policy，signature要用到的js算法到微信小程序

參考https://github.com/tomyun/crypto-js/tree/1.1.x。或者使用我們改好的https://github.com/peterhuang007/weixinFileToaliyun.git，只改動(dòng)暴露接口。

第七步：手機(jī)端預(yù)覽測(cè)試上傳功能。

在PC端IDE調(diào)試上傳的時(shí)候，不使用白名單沒問題，開啟校驗(yàn)白名單域名無法上傳文件。當(dāng)我們把域名（yiqixiu.oss-cn-hangzhou.aliyuncs.com）設(shè)置到微信小程序服務(wù)器的uploadFile合法域名時(shí)候，提示該域名因違規(guī)被禁止設(shè)置。如有異議，請(qǐng)?jiān)谖⑿趴蛻舳舜蜷_該域名進(jìn)行申訴。如何申訴，把https://yiqixiu.oss-cn-hangzhou.aliyuncs.com發(fā)到好友的對(duì)話窗口上在點(diǎn)擊打開，就可以進(jìn)行申訴了。但是我們的項(xiàng)目趕不能等。就只能使用Nginx配合申請(qǐng)一個(gè)代理域名做轉(zhuǎn)發(fā) https到http。在把代理域名設(shè)置到微信小程序服務(wù)器的uploadFile合法域名。

上傳視頻文件是成功了，但是新的問題又來了，我們?cè)诜?wù)端查看文件的時(shí)候，文件名跟上傳上來的文件對(duì)應(yīng)不上一直是 wx:file.mp4，而用微信小程序的IDE傳上來的視頻文件名稱為去掉wx:file//前綴字符串。而使用體驗(yàn)版的時(shí)候就無法上傳了。后來調(diào)試發(fā)現(xiàn)需要在from表單更改key 字段的內(nèi)容，即aliyunFileKey要指定上傳文件的object名稱（對(duì)應(yīng)服務(wù)端存放的位置和文件名）。

總結(jié)：

在使用一個(gè)新方案的時(shí)候，要做好各個(gè)接口測(cè)試，避免對(duì)接接口的時(shí)候遇到問題無從下手。

我們的項(xiàng)目用到的算法 https://github.com/peterhuang007/weixinFileToaliyun.git  文件下載：weixinFileToaliyun-master.zip