本文介绍如何在微信小程序环境下将文件上传到OSS。

背景信息

小程序是当下比较流行的移动应用,例如大家熟知的微信小程序、支付宝小程序等。它是一种全新的开发模式,无需下载和安装,因而可以被便捷地获取和传播,为终端用户提供更优的用户体验。如何在小程序环境下上传文件到OSS也成为开发者比较关心的一个问题。

JavaScript客户端直传实践的原理相同,小程序上传文件到OSS也是利用OSS提供的PostObject接口来实现表单文件上传到OSS。关于PostObject的详细介绍请参见API文档 PostObject

说明 在支付宝小程序环境下上传文件到OSS,请参见支付宝小程序直传实践

步骤1: 配置Bucket跨域访问

客户端进行表单直传到OSS时,会从浏览器向OSS发送带有Origin的请求消息。OSS对带有Origin头的请求消息会进行跨域规则(CORS)的验证。因此需要为Bucket设置跨域规则以支持Post方法。

  1. 登录OSS管理控制台
  2. 在左侧存储空间列表中,单击目标存储空间名称,打开该存储空间概览页面。
  3. 单击基础设置页签,找到跨域设置区域,然后单击设置
  4. 单击创建规则,配置如下图所示。

    说明 为了您的数据安全,实际使用时,来源栏建议您填写自己需要的域名。更多配置信息请参见设置跨域访问

步骤2:配置外网域名到小程序的域名白名单

  1. 登录OSS管理控制台
  2. 在左侧存储空间列表中,单击目标存储空间名称,打开该存储空间概览页面。
  3. 访问域名区域查看Bucket域名

  4. 登录微信小程序平台,配置小程序的上传域名白名单。

说明 实际业务中,您需要将OSS提供的外网域名和您自己的域名进行绑定。配置步骤请参见 绑定自定义域名

步骤3:使用Web端直传实践方案Demo进行上传测试

  1. 下载应用服务器代码
  2. 将文件解压,并打开upload.js文件。
  3. 修改upload.js中的配置信息。

    • accessId : 设置您的AccessKeyId。
    • accessKey : 设置您的AessKeySecret。
    • host: 格式为bucketname.endpoint,例如bucket-name.oss-cn-hangzhou.aliyuncs.com。关于Endpoint的介绍,请参见Endpoint访问域名
  4. 进行上传测试。
    1. 打开index.html文件。

    2. 单击选择文件,选择指定类型的文件,单击开始上传
  5. 获取上传需要的签名(signature)和加密策略(policy)。
    按F12开启web调试,在请求中的Form Data中获取signature和policy。

    说明 小程序上传主要是计算signature和policy,具体实践中建议用户在服务端进行相关签名的计算后返回给小程序,现提供node版本计算signature和policy的参考代码。

步骤4:使用微信小程序上传图片

使用chooseImage API进行图片选择,然后调用uploadFile进行文件上传。参考代码如下:

说明
  • 上述示例中,name字段为file字段。
  • 更多内容请参见PostObject