微信小程序里如何用阿里云上传视频图片

版权声明:本文为EnweiTech原创文章,未经博主允许不得转载。 https://blog.csdn.net/English0523/article/details/89182283

为了微信小程序客服端实现自拍视频能够分享给多个好友,我们需要把小程序自拍的视频存储到服务器,而阿里云在性能和速度上比较不错,所以我们选择了阿里云作服务器。

阿里云官方文档:

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) { }

             })

           }

         });

       }

     }

   })

 

 

// 上传图片完

}

  

都是自己亲测,亲坑。。。码字很累。解决了你的问题,就分享一哈吧。

展开阅读全文

没有更多推荐了,返回首页