步骤1： 配置Bucket跨域访问

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

1. 登录OSS管理控制台。
2. 在左侧存储空间列表中，单击目标存储空间名称，打开该存储空间概览页面。
3. 单击基础设置页签，找到跨域设置区域，然后单击设置。
4. 单击创建规则，配置如下图所示。
   说明 为了您的数据安全，实际使用时，来源栏建议您填写自己需要的域名。更多配置信息请参见设置跨域访问。

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

1. 登录OSS管理控制台。
2. 在左侧存储空间列表中，单击目标存储空间名称，打开该存储空间概览页面。
3. 在访问域名区域查看Bucket域名。
4. 登录微信小程序平台，配置小程序的上传域名白名单。

步骤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的参考代码。签名流程请参见PostObject文档中的Post Signature章节。

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

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

说明

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