上传文件到 TOS

您使用 PostObject 接口，将文件以 HTML 表单的格式，直接从 Web 端上传到 TOS。上传所需的签名可以从服务端获取。更多信息，请参见 [PostObject](/docs/6349/129228) 和 [Post 表单预签名](/docs/6349/1123288)。 ## 步骤一：配置跨域访问在微信小程序上传数据到 TOS 时，会向 TOS 发送跨域请求。当 TOS 收到跨域请求，会读取存储桶对应的跨域规则进行相应的权限检查。您需要在 TOS 设置跨域访问规则，实现微信小程序正常传输数据到 TOS。关于跨域访问规则的详细介绍，请参见[跨域访问设置](/docs/6349/75033)。 1. 登录[对象存储控制台](https://console.volcengine.com/tos)。 2. 在左侧导航栏，单击**桶列表**，在**桶列表**页面，单击目标桶名称。 3. 在左侧导航栏，选择**权限管理 \> 跨域访问设置。** 4. 在**跨域访问设置**页面，单击**创建规则**。 5. 在**创建CORS规则**页面，配置如下参数。 ![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/51edb96321fe4b4a9ed8736b63eb73b1~tplv-goo7wpa0wc-image.image =3122x) |**参数** |**说明** | |---|---| |来源 Origin |设置为 WEB 直传的域名。|\ | |:::tip|\ | |您也可以设置为通配符星号（\*），表示允许所有跨域请求来源。|\ | ||\ | |:::| |操作 Methods |勾选 **PUT**、**GET**、**POST**、**DELETE**、**HEAD**。 | |Allow\-Headers |设置为通配符星号（\*）。 | |Expose\-Headers |设置为 ETag、x\-tos\-request\-id 和 x\-tos\-version\-id。每行一个，以回车间隔。 | |缓存 Max\-Age |默认值即可。 | 6. 单击**确定**。 ## **步骤二：配置服务端** 在服务端可以参考如下代码获取签名 ```TypeScript import express from "express"; import TosClient from "@volcengine/tos-sdk"; const app = express(); const PORT = process.env.PORT || 8000; // 服务请求端口号 const getSignature = async (bucket: string,key: string) => { 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", // 临时访问凭证 region: "Provide your region", // 填写Bucket 所在地域。以华北2（北京)为例，"Provide your region" 填写为 cn-beijing。 endpoint: "Provide your endpoint" // 填写您的服务访问域名。以华北2（北京)为例，"Provide your endpoint" 填写为 tos-cn-beijing.volces.com。 }); const res = await client.preSignedPostSignature({ bucket, // 填写您的 Bucket，例如 examplebucket。 key, }); return res; }; app.get("/get_post_signature", async (req, res) => { try { const key = req.query.key as string; // 从请求参数中获取 key const bucket = req.query.bucket as string; // 从请求参数中获取 bucket const result = await getSignature(bucket, key); res.setHeader("Access-Control-Allow-Origin", "*"); // 允许跨域请求 res.setHeader("Access-Control-Allow-Headers", "*"); // 允许跨域请求的头部信息 res.setHeader("Access-Control-Allow-Methods", "*"); // 允许跨域请求的方法 res.json(result); // 返回生成的签名数据 } catch (error) { console.error("Error generating signature:", error); res.status(500).send("Error generating signature"); } }); app.listen(PORT, () => { console.log(`Server is running on http://127.0.0.1:${PORT}`); }); ``` 您需要根据实际情况替换示例代码中以下参数： |**参数** |**说明** | |---|---| |accessKeyId |从 STS 服务获取的临时访问 AccessKey ID。|\ | |:::tip|\ | |您可以通过 STS 服务，创建一个临时访问凭证，获取临时密钥。具体操作，请参见[使用 STS 临时 AK/SK+Token 访问火山引擎 TOS](/docs/6349/127695#%E6%AD%A5%E9%AA%A4%E5%85%AD%EF%BC%9A%E8%AF%B7%E6%B1%82-assumerole-%E6%8E%A5%E5%8F%A3%E8%8E%B7%E5%8F%96%E4%B8%B4%E6%97%B6%E8%AE%BF%E9%97%AE%E5%87%AD%E8%AF%81)。|\ | ||\ | |:::| |accessKeySecret |从 STS 服务获取的临时 Secret AccessKey。 | |stsToken |从 STS 服务获取的临时访问 Session Token。 | |region |存储桶所在地域。 | |endpoint |存储桶的访问域名。|\ | |:::tip|\ | |关于存储桶域名的详细介绍，请参见[地域和访问域名（Endpoint）](/docs/6349/107356)。|\ | ||\ | |:::| ## 步骤三：配置客户端代码在客户端可以参考如下代码上传文件 ```HTML 上传文件到 TOS

``` 您需要根据实际情况替换示例代码中以下参数： |**参数** |**说明** | |---|---| |url |您的服务端 url | |bucket |对象需要存储的桶名 | |endpoint |存储桶的访问域名。|\ | |:::tip|\ | |关于存储桶域名的详细介绍，请参见[地域和访问域名（Endpoint）](/docs/6349/107356)。|\ | ||\ | |:::|