為了微信小程序客服端實現自拍視頻能夠分享給多個好友,我們需要把小程序自拍的視頻存儲到服務器,而阿里云在性能和速度上比較不錯,所以我們選擇了阿里云作服務器。第一步。微信小程序項目 ...
為了微信小程序客服端實現自拍視頻能夠分享給多個好友,我們需要把小程序自拍的視頻存儲到服務器,而阿里云在性能和速度上比較不錯,所以我們選擇了阿里云作服務器。
第一步。微信小程序項目創(chuàng)建
1.到https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 下載微信小程序IDE,我們使用的是wechat_web_devtools_0.11.122100.dmg。
2.微信小程序的項目建立參考https://mp.weixin.qq.com/debug/wxadoc/dev/index.html。
第二步:在PC端測試微信小程序的上傳接口
wx.uploadFile(OBJECT),將本地資源上傳到開發(fā)者服務器。如頁面通過 wx.chooseImage 等接口獲取到一個本地資源的臨時文件路徑后,可通過此接口將本地資源上傳到指定服務器??蛻舳税l(fā)起一個 HTTPS POST 請求,其中 content-type 為 multipart/form-data 。具體的https數據流可以用wireshark抓取。
做測試的時候可以先開啟小程序開發(fā)工具的不校驗域名功能。如果有校驗域名的話,請先到 微信小程序的開發(fā)設置,設置uploadFile合法域名。
參考https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html#wxuploadfileobject
第三步:在PC端測試阿里云JS SDK的上傳接口
參考https://github.com/aliyun-UED/aliyun-sdk-js?spm=5176.7926468.195975.2.ZJcqCx。
測試之后可以在阿里云服務器端查看文件是否上傳成功。
移植阿里云JS SDK到微信小程序工程,發(fā)現有很多的語法兼容需要修改,在對比阿里云的上傳PostObject(參考https://help.aliyun.com/document_detail/31988.html?spm=5176.product31815.6.875.5AzInj)和微信小程序的上傳接口,其實只要在微信小程序上傳API (wx.uploadFile)的OBJECT參數formData:增加'key': 'OSSAccessKeyId': 'policy':'Signature':'success_action_status':,這五個字段信息。
第四步。試用POSTMAN測試上傳視頻文件到阿里云
參數設置
為快速獲取 policy,Signature,這兩個字段的數據,我們可以參考(https://help.aliyun.com/document_detail/31988.html?spm=5176.product31815.6.875.5AzInj )oss-h5-upload-js-direct.zip 這個例子,通過chrome 開發(fā)者選項,查看這兩個字段的數據。
第五步:試用POSTMAN參數配置到微信小程序上傳視頻文件到阿里云
微信小程序端API 配置
其中對應Postman的測試參數, aliyunFileKey='${filename}',accessid='在阿里云OSS申請的
accessKeyId',policyBase64='eyJleHBpcmF0aW9uIjoiMjAyMC0wMS0wMVQxMjowMDowMC4wMDBaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF1dfQ',signature='PSWlNPrNjU2xdEiwFLiOBa2ieEU='。
第六步:移植阿里云policy,signature要用到的js算法到微信小程序
參考https://github.com/tomyun/crypto-js/tree/1.1.x?;蛘呤褂梦覀兏暮玫膆ttps://github.com/peterhuang007/weixinFileToaliyun.git,只改動暴露接口。
第七步:手機端預覽測試上傳功能。
在PC端IDE調試上傳的時候,不使用白名單沒問題,開啟校驗白名單域名無法上傳文件。當我們把域名(yiqixiu.oss-cn-hangzhou.aliyuncs.com)設置到微信小程序服務器的uploadFile合法域名時候,提示該域名因違規(guī)被禁止設置。如有異議,請在微信客戶端打開該域名進行申訴。如何申訴,把https://yiqixiu.oss-cn-hangzhou.aliyuncs.com發(fā)到好友的對話窗口上在點擊打開,就可以進行申訴了。但是我們的項目趕不能等。就只能使用Nginx配合申請一個代理域名做轉發(fā) https到http。在把代理域名設置到微信小程序服務器的uploadFile合法域名。
上傳視頻文件是成功了,但是新的問題又來了,我們在服務端查看文件的時候,文件名跟上傳上來的文件對應不上一直是 wx:file.mp4,而用微信小程序的IDE傳上來的視頻文件名稱為去掉wx:file//前綴字符串。而使用體驗版的時候就無法上傳了。后來調試發(fā)現需要在from表單更改key 字段的內容,即aliyunFileKey要指定上傳文件的object名稱(對應服務端存放的位置和文件名)。
在使用一個新方案的時候,要做好各個接口測試,避免對接接口的時候遇到問題無從下手。
我們的項目用到的算法 https://github.com/peterhuang007/weixinFileToaliyun.git 文件下載:weixinFileToaliyun-master.zip