文档中心

对象存储

请输入

最佳实践

从微信小程序直传数据到 TOS

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

背景信息

微信小程序作为不需要下载即可使用的应用，吸引了越来越多的人进行开发和使用。如何将微信小程序上的文件上传到 TOS 成为开发者关心的一个问题。针对该场景，您可以在表单中增加签名信息，使用 PostObject 接口将微信小程序上的文件以 HTML 表单的形式上传到 TOS。更多信息，请参见 Post 表单预签名。

步骤一：配置跨域访问

从微信小程序上传数据到 TOS 时，会向 TOS 发送跨域请求。当 TOS 收到跨域请求，会读取存储桶对应的跨域规则进行相应的权限检查。您需要在 TOS 设置跨域访问规则，实现微信小程序正常传输数据到 TOS。关于跨域访问规则的详细介绍，请参见跨域访问设置。

登录对象存储控制台。

在左侧导航栏，单击桶列表，在桶列表页面，单击目标桶名称。

在左侧导航栏，选择权限管理 > 跨域访问设置。

在跨域访问设置页面，单击创建规则。

在创建CORS规则页面，配置如下参数。

参数	说明
来源 Origin	设置为微信小程序的域名。说明您也可以设置为通配符星号（*），表示允许所有跨域请求来源。
操作 Methods	勾选 PUT、GET、POST、DELETE、HEAD。
Allow-Headers	设置为通配符星号（*）。
Expose-Headers	设置为 ETag、x-tos-request-id 和 x-tos-version-id。每行一个，以回车间隔。
缓存 Max-Age	默认值即可。

单击确定。

步骤二：配置域名白名单

微信小程序需要为 Bucket 域名配置白名单，才能实现微信小程序正常访问 TOS 存储桶。

说明

建议您为 Bucket 域名绑定您自己的域名，使用您自己的域名访问存储在 TOS 的文件。具体操作，请参见设置自定义域名。

获取 Bucket 域名。

登录对象存储控制台。

在左侧导航栏，单击桶列表，在桶列表页面，单击目标桶名称。

在左侧导航栏，单击概览。

在概览页面访问域名区域 Bucket 域名列，获取外网访问对应的域名。

配置域名白名单。

登录微信小程序平台。

进入目标小程序，选择开发 > 开发管理 > 开发设置。

找到服务器域名区域，单击开始配置。

在配置服务器域名对话框，分别在 uploadFile合法域名和 downloadFile合法域名输入框输入 Bucket 域名。

单击保存并提交。

步骤三：上传数据到 TOS

以下 JS SDK 示例先使用 SDK 的 calculatePostSignature 方法生成 TOS PostObject 上传对象所需签名，然后再使用微信小程序的 uploadFile 接口上传文件，具体示例代码如下：

您需要根据实际情况替换示例代码中以下参数：

参数	说明
accessKeyId	从 STS 服务获取的临时访问 AccessKey ID。说明您可以通过 STS 服务，创建一个临时访问凭证，获取临时密钥。具体操作，请参见使用 STS 临时 AK/SK+Token 访问火山引擎 TOS。
accessKeySecret	从 STS 服务获取的临时 Secret AccessKey。
stsToken	从 STS 服务获取的临时访问 Session Token。
region	存储桶所在地域。
endpoint	存储桶的访问域名。说明关于存储桶域名的详细介绍，请参见地域和访问域名（Endpoint）。
const bucket	存储桶的名称。
const key	对象的名称。
const url	访问 URL，格式为 https://<Bucket 域名>/<经过 encode 编码后的对象名称>。

最近更新时间：2026.09.21 14:00:47

这个页面对您有帮助吗？

有用

无用