為了微信小程(cheng)序客(ke)服端實現自拍視(shi)頻(pin)(pin)能(neng)夠分享給多個好友(you)，我(wo)們需要把(ba)小程(cheng)序自拍的視(shi)頻(pin)(pin)存(cun)儲到服務器，而阿里云在(zai)性能(neng)和速度上比較不錯(cuo)，所以我(wo)們選擇了阿里云作服務器。

第一步(bu)。微信小程序項目創建

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

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

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

wx.uploadFile(OBJECT)，將本地資(zi)源上傳到開(kai)發(fa)者服務器。如頁面通過 wx.chooseImage 等接口獲取(qu)(qu)到一(yi)個本地資(zi)源的臨時文件(jian)路徑后，可通過此接口將本地資(zi)源上傳到指定服務器。客戶端發(fa)起(qi)一(yi)個 HTTPS POST 請(qing)求，其中 content-type 為 multipart/form-data 。具體的https數據(ju)流(liu)可以用wireshark抓(zhua)取(qu)(qu)。

做測試(shi)的時候可以(yi)先開啟小程序開發(fa)工具的不校驗(yan)域名(ming)(ming)功(gong)能。如果(guo)有校驗(yan)域名(ming)(ming)的話(hua)，請先到 微信小程序的開發(fa)設置(zhi)，設置(zhi)uploadFile合(he)法域名(ming)(ming)。

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

第三(san)步：在PC端(duan)測試阿里(li)云(yun)JS SDK的上傳接(jie)口

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

測(ce)試之后可以在阿里云服務器端查看文件是否上傳成(cheng)功(gong)。

移植(zhi)阿里(li)云(yun)JS SDK到(dao)微(wei)信小程(cheng)(cheng)序工程(cheng)(cheng)，發現有很多的(de)語法兼(jian)容需要修改，在(zai)對比阿里(li)云(yun)的(de)上傳PostObject(參(can)考//help.aliyun.com/document_detail/31988.html?spm=5176.product31815.6.875.5AzInj)和微(wei)信小程(cheng)(cheng)序的(de)上傳接(jie)口(kou)，其實只要在(zai)微(wei)信小程(cheng)(cheng)序上傳API （wx.uploadFile）的(de)OBJECT參(can)數formData：增加'key': 'OSSAccessKeyId': 'policy':'Signature':'success_action_status':,這五個字段(duan)信息。

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

參數設置

為快速獲(huo)取 policy，Signature，這(zhe)兩(liang)個(ge)(ge)字段的(de)數據(ju)，我們可以參考（//help.aliyun.com/document_detail/31988.html?spm=5176.product31815.6.875.5AzInj ）oss-h5-upload-js-direct.zip 這(zhe)個(ge)(ge)例(li)子，通過chrome 開發(fa)者選項，查看這(zhe)兩(liang)個(ge)(ge)字段的(de)數據(ju)。

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

微信小程序端API 配(pei)置

其中(zhong)對應Postman的測試參數， aliyunFileKey='${filename}',accessid='在阿里云OSS申請的

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

第六步(bu)：移植(zhi)阿里云policy，signature要(yao)用(yong)到的(de)js算法到微信小程(cheng)序

參考//github.com/tomyun/crypto-js/tree/1.1.x。或(huo)者使用我們改好的//github.com/peterhuang007/weixinFileToaliyun.git，只改動暴(bao)露(lu)接(jie)口。

第七(qi)步：手機(ji)端預覽測試上傳功能。

在PC端IDE調試上傳的(de)(de)時(shi)候，不使(shi)用(yong)白(bai)名單(dan)(dan)沒問題，開啟校驗(yan)白(bai)名單(dan)(dan)域(yu)名無法上傳文件。當我們(men)把域(yu)名（yiqixiu.oss-cn-hangzhou.aliyuncs.com）設置(zhi)到微(wei)信小(xiao)程(cheng)序服務器的(de)(de)uploadFile合(he)法域(yu)名時(shi)候，提示該域(yu)名因(yin)違規(gui)被禁止設置(zhi)。如有異議(yi)，請(qing)在微(wei)信客戶端打(da)開該域(yu)名進行申(shen)(shen)訴。如何申(shen)(shen)訴，把//yiqixiu.oss-cn-hangzhou.aliyuncs.com發到好(hao)友(you)的(de)(de)對(dui)話(hua)窗口上在點擊打(da)開，就可以進行申(shen)(shen)訴了。但是我們(men)的(de)(de)項目趕不能(neng)等。就只能(neng)使(shi)用(yong)Nginx配(pei)合(he)申(shen)(shen)請(qing)一個代理域(yu)名做(zuo)轉發 https到http。在把代理域(yu)名設置(zhi)到微(wei)信小(xiao)程(cheng)序服務器的(de)(de)uploadFile合(he)法域(yu)名。

上(shang)(shang)(shang)傳視(shi)頻文(wen)件(jian)(jian)(jian)是(shi)成(cheng)功了，但是(shi)新的(de)(de)(de)問(wen)題又來了，我們在服(fu)務端查看文(wen)件(jian)(jian)(jian)的(de)(de)(de)時候，文(wen)件(jian)(jian)(jian)名(ming)跟上(shang)(shang)(shang)傳上(shang)(shang)(shang)來的(de)(de)(de)文(wen)件(jian)(jian)(jian)對應(ying)不上(shang)(shang)(shang)一(yi)直是(shi) wx:file.mp4，而(er)用微信小程序的(de)(de)(de)IDE傳上(shang)(shang)(shang)來的(de)(de)(de)視(shi)頻文(wen)件(jian)(jian)(jian)名(ming)稱為去掉wx:file//前綴字符串(chuan)。而(er)使用體驗版的(de)(de)(de)時候就(jiu)無(wu)法上(shang)(shang)(shang)傳了。后來調試發現需要在from表單更改key 字段的(de)(de)(de)內容，即aliyunFileKey要指定上(shang)(shang)(shang)傳文(wen)件(jian)(jian)(jian)的(de)(de)(de)object名(ming)稱（對應(ying)服(fu)務端存放的(de)(de)(de)位置和文(wen)件(jian)(jian)(jian)名(ming)）。

總結：

 在使用一個(ge)新方(fang)案的時候(hou)，要(yao)做好(hao)各個(ge)接(jie)(jie)口(kou)(kou)測試，避免對接(jie)(jie)接(jie)(jie)口(kou)(kou)的時候(hou)遇到問題無(wu)從下手。

我們的(de)項目用(yong)到(dao)的(de)算法 //github.com/peterhuang007/weixinFileToaliyun.git  文件下載：weixinFileToaliyun-master.zip