微信小程序直传图片、视频至阿里云 OSS

更新日期: 2020-12-04 阅读次数: 375 字数: 519 分类: 微信小程序

在需要上传大文件例如视频时,小程序先传到服务器,再传到阿里云 OSS,不太合适。比较好的做法是直接传到 OSS。这样可以节省服务器的带宽。

但是,阿里云 OSS 直传的文档写的太简陋,所以整理了一下。

上传前的基本配置

  • 启用 OSS 跨域
  • oss 域名添加到小程序的上传域名白名单

上传需要哪些参数

小程序上传主要是计算 signature 和 policy ,具体实践中建议用户在服务端进行相关签名的计算后返回给小程序。

  • URL: Bucket 域名,不需要指定路径。但是不要漏了 bucket 名作为子域。例如:https://xxx.oss-cn-qingdao.aliyuncs.com
  • OSSAccessKeyId:即 access key
  • policy: 时间上就是规定了这个类 token 的上传失效时间,及文件大小限制。完全可以服务端生成,然后传给前端。
  • key: 上传Object的名称。如果名称包含路径,例如a/b/c/b.jpg,则OSS会自动创建相应的文件夹。
  • signature: 服务端生成的签名

signature

为何需要 signature ?

Post操作需要对Bucket拥有写权限。如果Bucket为public-read-write,可以不上传签名信息,否则要求对该操作进行签名验证。

signature 是对哪些数据进行的计算结果?

使用 AccessKey Secret 对 policy 进行计算,得到的签名,即是 signature 。

policy

时间上就是规定了这个类 token 的上传失效时间,及文件大小限制。

官方示例代码:

https://github.com/aliyun/aliyun-oss-java-sdk/blob/master/src/samples/PostObjectSample.java

String policy
            = "{\"expiration\": \"2120-01-01T12:00:00.000Z\",\"conditions\": [[\"content-length-range\", 0, 104857600]]}";
String encodePolicy = new String(Base64.encodeBase64(policy.getBytes()));

注意,返回给小程序前端时,需要转成 base64。

示例代码

policy 和 signature 通过接口从服务器端获取,最好同时获取一个文件 UUID,以避免文件名重复。

uploadFile: function() {
  wx.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: res => {
      // tempFilePath可以作为img标签的src属性显示图片
      const tempFilePath = res.tempFilePaths[0]
      wx.uploadFile({
        // xxx 是 bucket 名,qingdao 需要替换自己的区域
        url: "https://xxx.oss-cn-qingdao.aliyuncs.com",     
        filePath: tempFilePath,
        name: 'file',
        formData: {
          'key': "test/hello.png",
          'policy': this.data.policy,     // 从服务端获取的 policy
          'OSSAccessKeyId': "YOUR_ACCESS_KEY",
          'signature': this.data.signature,    // 从服务端获取的 policy
          'success_action_status': '200',
        },
        success: res => {
          const data = JSON.parse(res.data)
          console.log(data);
        }
      })
    }
  })
},

参考

  • 微信小程序直传实践 https://help.aliyun.com/document_detail/92883.html
  • 微信小程序直传图片至阿里云OSS,signature通过后台服务器获取(不暴露OssAccessKeySecret) https://blog.csdn.net/lld2002/article/details/89240411
  • 更详细的官方文档 https://github.com/AlibabaCloudDocs/oss/blob/master/cn.zh-CN/%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B4%E4%BC%A0%E5%AE%9E%E8%B7%B5.md
领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。同时也欢迎关注我的微信公众号“大象工具”: 大象工具微信公众号

tags: 阿里云 OSS

相关文章

爱评论不评论

近期节日

查看更多节日