文档中心

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

最近更新时间：2023.11.13 17:32:04

首次发布时间：2023.08.10 11:16:04

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

背景信息

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

步骤一：配置跨域访问

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

登录对象存储控制台。
在左侧导航栏，单击桶列表，在桶列表页面，单击目标桶名称。
在左侧导航栏，选择权限管理 > 跨域访问设置。
在跨域访问设置页面，单击创建规则。

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

参数	说明
来源 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 域名。
1. 登录对象存储控制台。
2. 在左侧导航栏，单击桶列表，在桶列表页面，单击目标桶名称。
3. 在左侧导航栏，单击概览。
4. 在概览页面访问域名区域 Bucket 域名列，获取外网访问对应的域名。
配置域名白名单。
1. 登录微信小程序平台。
2. 在小程序页面服务器域名区域，单击开始配置。
3. 在配置服务器域名对话框，分别在 uploadFile合法域名和 downloadFile合法域名输入框输入 Bucket 域名。
4. 单击保存并提交。

步骤三：上传数据到 TOS

使用微信小程序的 uploadFile 接口上传文件，示例代码如下：

// 确保sdk 版本大于等于 2.6.10
import { TosClient } from '@volcengine/tos-sdk'

async function wxUploadToTOS() {
  // 创建客户端
  const client = new TosClient({
    accessKeyId: "Provide your access key", // 从 STS 服务获取的临时访问密钥 AccessKey ID
    accessKeySecret: "Provide your secret key", // 从 STS 服务获取的临时访问密钥 AccessKey Secret
    stsToken: "Provide your session token", // 从 STS 服务获取的临时访问 Session Token
    region: "Provide your region", // 填写Bucket 所在地域。以华北2（北京)为例，"Provide your region" 填写为 cn-beijing。
  });

  const res = await wx.chooseMessageFile({ count: 1 });
  const path = res.tempFiles[0].path;
  const bucket = 'test-bucket';
  const key = 'wx-miniprogram-test';

  //为了您的数据安全，建议使用签名方式上传文件。具体可以参考https://www.volcengine.com/docs/6349/113484
  //关于 POST 表单预签名的详细信息，请参见基于浏览器上传的表单中包含签名。
  const formData = await client.calculatePostSignature({
    bucket,
    key,
    expiresIn: 3600,
  })
  // bucketHost 替换成对应桶域名 ${bucket}.tos-${region}.volces.com
  const bucketHost = `${bucket}.tos-cn-beijing.volces.com`;
  const url = `https://${bucketHost}/${encodeURIComponent(key)}`
  const result = await wx.uploadFile({
    filePath: path,
    name: 'file', // 固定为 file
    url,
    formData,
    success: (res) => {
      if (res.statusCode === 204) {
        console.log('上传成功');
      }
    },
    fail: err => {
      console.log(err);
    }
  })
  console.log(result, 'result');
}

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

参数	说明
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 编码后的对象名称>`。

背景信息

步骤一：配置跨域访问

步骤二：配置域名白名单

步骤三：上传数据到 TOS

对象存储

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

背景信息

步骤一：配置跨域访问

步骤二：配置域名白名单

步骤三：上传数据到 TOS