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

在需要上传大文件例如视频时，小程序先传到服务器，再传到阿里云 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

tags: 阿里云 OSS

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式