You need to enable JavaScript to run this app.
文档中心
对象存储

对象存储

请输入
  • 文档首页
    • 对象存储最佳实践Web 直传实践
复制全文
下载 pdf
我的收藏
最佳实践
Web 直传实践
复制全文
下载 pdf
我的收藏
Web 直传实践
您使用 PostObject 接口，将文件以 HTML 表单的格式，直接从 Web 端上传到 TOS。上传所需的签名可以从服务端获取，参见 Post 表单预签名。​
步骤一：配置跨域访问​
从 Web 上传数据到 TOS 时，会向 TOS 发送跨域请求。当 TOS 收到跨域请求，会读取存储桶对应的跨域规则进行相应的权限检查。您需要在 TOS 设置跨域访问规则，实现 Web 正常传输数据到 TOS。关于跨域访问规则的详细介绍，请参见跨域访问设置。​
  1. 登录对象存储控制台。​
  1. 在左侧导航栏，单击桶列表，在桶列表页面，单击目标桶名称。​
  1. 在左侧导航栏，选择权限管理 > 跨域访问设置。​
  1. 在跨域访问设置页面，单击创建规则。​
  1. 在创建CORS规则页面，配置如下参数。​Image​​
  • ​
    参数​
    说明​
    来源 Origin​
    设置为 WEB 直传的域名。​
    说明​
    您也可以设置为通配符星号（*），表示允许所有跨域请求来源。​
    操作 Methods​
    勾选 PUT、GET、POST、DELETE、HEAD。​
    Allow-Headers​
    设置为通配符星号（*）。​
    Expose-Headers​
    设置为 ETag、x-tos-request-id 和 x-tos-version-id。每行一个，以回车间隔。​
    缓存 Max-Age​
    默认值即可。​
    ​
  1. 单击确定。​
步骤二：配置服务端​
在服务端可以参考如下代码获取签名​
​
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。​
说明​
您可以通过 STS 服务，创建一个临时访问凭证，获取临时密钥。具体操作，请参见使用 STS 临时 AK/SK+Token 访问火山引擎 TOS。​
accessKeySecret​
从 STS 服务获取的临时 Secret AccessKey。​
stsToken​
从 STS 服务获取的临时访问 Session Token。​
region​
存储桶所在地域。​
endpoint​
存储桶的访问域名。详情请参见地域和访问域名（Endpoint）。​
​
步骤三：配置客户端代码​
在客户端可以参考如下代码上传文件​
​
<!DOCTYPE html>​
<html lang="en">​
<head>​
<meta charset="UTF-8" />​
<meta name="viewport" content="width=device-width, initial-scale=1.0" />​
<title>上传文件到 TOS</title>​
</head>​
<body>​
<div class="container">​
<form>​
<div>​
<label for="file" class="form-label">选择文件:</label>​
<input type="file" id="file" name="file" required />​
</div>​
<button type="submit">上传</button>​
</form>​
</div>​
<script>​
const form = document.querySelector("form");​
const url = "http://127.0.0.1:8000/get_post_signature"​
const bucket = "example-bucket";​
// 根据实际 Region 填写域名，这里以 cn-beijing 为例​
const endpoint = "tos-cn-beijing.volces.com"​
form.addEventListener("submit", async (event) => {​
event.preventDefault();​
const fileInput = document.getElementById("file");​
const file = fileInput.files[0];​
if (!file) {​
alert("请选择一个文件");​
return;​
}​
console.log(file);​
const key = file.name;​
fetch(​
`${url}?key=${key}&bucket=${bucket}`,​
{​
method: "GET",​
}​
)​
.then((response) => {​
return response.json();​
})​
.then((data) => {​
const bucketHost = `${bucket}.${endpoint}`;​
const url = `https://${bucketHost}/${encodeURI(key)}`;​
const formData = new FormData();​
formData.append("key", data.key);​
formData.append("policy", data.policy);​
formData.append('x-tos-algorithm', data['x-tos-algorithm']);​
formData.append('x-tos-credential', data['x-tos-credential']);​
formData.append('x-tos-date', data['x-tos-date']);​
formData.append('x-tos-signature', data['x-tos-signature']);​
formData.append("x-tos-security-token", data["x-tos-security-token"]);​
formData.append("file", file);​
return fetch(url, {​
method: "POST",​
body: formData,​
});​
})​
.then((response) => {​
if (response.ok) {​
console.log("上传成功");​
alert("文件已上传");​
} else {​
console.log("上传失败", response);​
alert("上传失败，请稍后再试");​
}​
})​
.catch((error) => {​
console.error("发生错误:", error);​
});​
});​
</script>​
</body>​
</html>​
​
您需要根据实际情况替换示例代码中以下参数：​
​
参数​
说明​
url​
您的服务端 url。​
bucket​
对象需要存储的桶名。​
endpoint​
存储桶的访问域名。详情请参见地域和访问域名（Endpoint）。​
​
​
最近更新时间：2026.08.24 18:17:47
这个页面对您有帮助吗？
有用
有用
无用
无用