微信小程式裡如何用阿里雲上傳視訊圖片

為了微信小程式客服端實現自拍視訊能夠分享給多個好友，我們需要把小程式自拍的視訊儲存到伺服器，而阿里雲在效能和速度上比較不錯，所以我們選擇了阿里雲作伺服器。

阿里雲官方文件:

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用。

+ View Code

　　有了上面的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

import base64 from "base-64"

import {Crypto} from "./crypto.js"

const util = {

aliOssParams(){

var aid = "xxxxxxx";//你自己的阿里雲的accessid

var aky="xxxxxxxxxx";//你自己的阿里雲的accesskey

var host = "https://xxxxxxxxx.aliyuncs.com";//你自己的阿里雲域名

var policyText = {

"expiration": "2022-01-01T12:00:00.000Z",//上傳的檔案失效日期自己定義

"conditions": [

["content-length-range", 0, 10485760000]//上傳的內容大小，自己定義

]

};

var policy = base64.encode(JSON.stringify(policyText));//生成的加密策略

var bytes = Crypto.util.HMAC(Crypto.util.SHA1, policy, aky, { asBytes: true }) ;

var signature = Crypto.util.bytesToBase64(bytes);//生成的簽名

return {

policy: policy,

signature:signature,

aid:aid,

host: host

}

export {util}

至於如何上傳圖片，大體如下，請保證以上都已經跑通了，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

upMyImg(){

var aliOssParams = util.aliOssParams();

var that = this;

wx.chooseImage({

count: 9, //最多可以選擇的圖片總數

// sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有

sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有

success: function (res) {

// 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片

var tempFilePaths = res.tempFilePaths;

//啟動上傳等待中...

wx.showToast({

title: '正在上傳...',

icon: 'loading',

mask: true,

duration: 10000

})

var uploadImgCount = 0;

var tempFilePath;

var stringFilePath = '';

var alikey = '' ;

var type='';

for (var i = 0, h = tempFilePaths.length; i < h; i++) {

// stringFilePath= String(tempFilePaths[i]);

// type = stringFilePath.substring(stringFilePath.lastIndexOf('.'));

alikey = 'imagees/'+new Date().getTime() + Math.floor(Math.random() * 150)+ '.jpg';

that.srcs.push(tempFilePaths[i]);

that.setData({srcs: that.srcs});

wx.uploadFile({

url: aliOssParams.host,

filePath: tempFilePaths[i],//上傳圖片的路徑

name: 'file',

formData: {

key: alikey,

name: tempFilePaths[i],

policy:aliOssParams.policy,

OSSAccessKeyId: aliOssParams.aid,

success_action_status: "200",

signature: aliOssParams.signature,

},

success: function (res) {

uploadImgCount++;

console.log('rrrs',res,tempFilePaths[i]);

// var data = JSON.parse(res.data);

//伺服器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }

// console.log('rrr',data);

console.log('ddd222',res,aliOssParams.host,alikey);

// var productInfo = that.data.productInfo;

// if (productInfo.bannerInfo == null) {

// productInfo.bannerInfo = [];

// }

// productInfo.bannerInfo.push({

// "catalog": data.Catalog,

// "fileName": data.FileName,

// "url": data.Url

// });

// that.setData({

// productInfo: productInfo

// });

//如果是最後一張,則隱藏等待中

if (uploadImgCount == tempFilePaths.length) {

// that.srcs.push(tempFilePaths[i]);

console.log(that.srcs,3222);

wx.hideToast();

wx.showToast({

title: "上傳成功",

icon: 'success',

duration: 1000

})

}

},

fail: function (res) {

wx.hideToast();

wx.showModal({

title: '錯誤提示',

content: '上傳圖片失敗',

showCancel: false,

success: function (res) { }

})

}

});

}

})

// 上傳圖片完

}

都是自己親測，親坑。。。碼字很累。解決了你的問題，就分享一哈吧。

微信小程式裡如何用阿里雲上傳視訊圖片

相關文章