爲了微信小程序客服端實現自拍視頻能夠分享給多個好友,我們需要把小程序自拍的視頻存儲到服務器,而阿里雲在性能和速度上比較不錯,所以我們選擇了阿里雲作服務器。
阿里雲官方文檔:
https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.634.AMs4Fj
需要由後臺提供接口,前端獲取一些必要參數
純手寫,踩了半天多的坑幹出來了。。。
網上也有對於阿里雲如何在微信小程序裏使用,但是很不全,包括阿里雲文檔的最佳實踐裏。
上傳流程:
選擇圖片-->獲取到圖片臨時路徑,將圖片臨時路徑存入data
點擊發布按鈕-->獲取oss參數
獲取oss參數成功-->執行上傳阿里雲
上傳阿里雲成功-->執行上傳服務器
上傳服務器成功-->結束整個上傳流程
由於爲了方便大家瀏覽,沒有用函數回調.
大家可以根據自己的需求,結合自己的場景,來進行函數回調或者使用ES6的Promise方法.
上傳阿里雲過程中幾個容易忽視的坑: 圖片路徑處理/時間戳判斷
話不多說上代碼了。
1 upvideo(){ 2 var aliOssParams = util.aliOssParams();//主要是獲取上傳阿里雲的加密策略policy和簽名signature;以及上傳自己要上傳到阿里雲的地址,當然還有自己阿里雲accessid。 3 //上傳視頻到阿里雲 4 var that = this; 5 wx.chooseVideo({ 6 maxDuration: 10, 7 success: function (res) { 8 var tempFilePath = res.tempFilePath; 9 var stringFilePath = String(tempFilePath); 10 var indexType = stringFilePath.lastIndexOf('.'); 11 var type = stringFilePath.substring(indexType); 12 var alikey = 'video/'+new Date().getTime() + 13 Math.floor(Math.random() * 1000)+ type ;//隨機1000內的數加上時間戳作爲你存放在阿里雲video目錄下名字和類型。 14 wx.uploadFile({ 15 url:aliOssParams.host, 16 filePath: tempFilePath, 17 name: 'file', 18 formData: { 19 name: tempFilePath, 20 key: alikey,//這個是關鍵它是定義存放在阿里雲那個目錄下 21 policy:aliOssParams.policy,//上傳阿里雲的加密策略 22 OSSAccessKeyId: aliOssParams.aid,//自己阿里雲的aid 23 success_action_status: "200", 24 signature: aliOssParams.signature,//上傳阿里雲的簽名 25 }, 26 success: function (res) { 27 var videoUrl = aliOssParams.host+'/'+alikey;//這就是 28 剛上傳阿里雲後的存放的地址鏈接,通過它打開你剛上傳視頻。 29 that.videoUrl = videoUrl; 30 console.log('that',that,videoUrl); 31 wx.showToast({ 32 title: "上傳成功", 33 icon: 'success', 34 duration: 1000 35 }) 36 }, 37 fail: function ({ errMsg }) { 38 wx.showToast({ 39 title: "上傳失敗", 40 duration: 1000 41 }) 42 }, 43 }) 44 } 45 }) 46
通過代碼大家可以看到最關鍵的是啥,如何獲取加密策略和簽名了,當然了,阿里雲最佳實踐裏有demo,但是crypto這個庫已經廢棄了,它demo給你帶過來的crypto,你只能自己去提取了。
這裏是我提爲大家提取的crypto函數,直接copy用。
有了上面的crypto工具函數了,就去看看具體如何生成簽名與加密策略吧。。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
至於如何上傳圖片,大體如下,請保證以上都已經跑通了,base64記得你上面引到。。
多張圖片的上傳如此
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
|
都是自己親測,親坑。。。碼字很累。解決了你的問題,就分享一哈吧。