微信小程序上傳阿里云視頻文件流程及代碼

? ? ? 為了微信小程序客服端實現自拍視頻能夠分享給多個好友,我們需要把小程序自拍的視頻存儲到服務器,而阿里云在性能和速度上比較不錯,所以我們選擇了阿里云作服務器。

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

? ? 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),將本地資源上傳到開發者服務器。如頁面通過 wx.chooseImage 等接口獲取到一個本地資源的臨時文件路徑后,可通過此接口將本地資源上傳到指定服務器??蛻舳税l起一個 HTTPS POST 請求,其中 content-type 為 multipart/form-data 。具體的https數據流可以用wireshark抓取。

? ? ? 做測試的時候可以先開啟小程序開發工具的不校驗域名功能。如果有校驗域名的話,請先到 微信小程序的開發設置,設置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到微信小程序工程,發現有很多的語法兼容需要修改,在對比阿里云的上傳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 開發者選項,查看這兩個字段的數據。

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

微信小程序端API 配置

? ? ?其中對應Postman的測試參數, aliyunFileKey='${filename}',accessid='在阿里云OSS申請的accessKeyId',policyBase64='eyJleHBpcmF0aW9uI..............',signature='PSWlNPrNjU2xdEiwFLiOBa2ieEU='。

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

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

第七步。手機端預覽測試上傳功能。

? ? 在PC端IDE調試上傳的時候,不使用白名單沒問題,開啟校驗白名單域名無法上傳文件。當我們把域名(yiqixiu.oss-cn-hangzhou.aliyuncs.com)設置到微信小程序服務器的uploadFile合法域名時候,提示該域名因違規被禁止設置。如有異議,請在微信客戶端打開該域名進行申訴。如何申訴,把https://yiqixiu.oss-cn-hangzhou.aliyuncs.com發到好友的對話窗口上在點擊打開,就可以進行申訴了。但是我們的項目趕不能等。就只能使用Nginx配合申請一個代理域名做轉發 https到http。在把代理域名設置到微信小程序服務器的uploadFile合法域名。

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

?總結:

? ? ?在使用一個新方案的時候,要做好各個接口測試,避免對接接口的時候遇到問題無從下手。

? ? ? 我們的項目用到的算法 https://github.com/peterhuang007/weixinFileToaliyun.git


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,431評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,637評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,555評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,900評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,629評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,976評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,976評論 3 448
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,139評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,686評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,411評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,641評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,129評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,820評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,233評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,567評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,362評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,604評論 2 380

推薦閱讀更多精彩內容