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

背景

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

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

步骤 1: 配置 Bucket 跨域

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

具体操作步骤请参见设置跨域访问

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

  1. 通过 OSS 控制台查看外网域名。

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

说明 实际业务中,您需要将 OSS 提供的外网域名和您自己的域名进行绑定。具体操作请参见 OSS 域名绑定

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

  1. 下载应用服务器代码。下载地址
  2. 修改 Demo 中 upload.js 的密钥和地址。

  3. 进行上传测试。

  4. 获取上传需要的签名(signature)和加密策略(policy)。
    关于 signature 的获取可参考 upload.js 的代码;关于 policy 的格式可参考 upload.js代码 policyText。

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

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