要将网站图片存入火山引擎tos,需后端调用tos api上传并返回公开url嵌入html;否则图片仅存本地。步骤包括:获取bucket信息与accesskey、配置bucket公读策略、后端集成sdk上传、前端用返回url渲染图片。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

要把网站图片存到火山引擎对象存储(TOS)里,得先让网站后端能调用TOS的API上传文件,再把返回的可公开访问URL写进网页HTML中——这一步漏掉,图片就只存在服务器本地,根本不会出现在TOS上。
获取TOS密钥与Bucket信息
登录火山引擎控制台 → 进入「对象存储 TOS」→ 选择目标地域 → 点击左侧「Bucket 列表」→ 找到或新建一个Bucket → 记下Bucket名称、所在区域(如cn-beijing)、Endpoint(形如https://tos-cn-beijing.volces.com)。
点击右上角头像 → 「AccessKey管理」→ 创建新的AccessKey → 复制AccessKey ID和AccessKey Secret。这两个密钥后续要填进代码里,【务必保管好,切勿泄露或硬编码在前端】。
配置TOS Bucket权限为公读
回到Bucket详情页 → 左侧菜单点「权限管理」→ 「Bucket Policy」→ 点击「编辑」→ 粘贴以下策略(将your-bucket-name替换成你的真实Bucket名):
{"Version":"2023-01-01","Statement":[{"Effect":"Allow","Principal":"*","Action":["tos:GetObject"],"Resource":["arn:tos:cn-beijing:your-bucket-name:*"]}]}
保存后,该Bucket下的对象默认可通过URL直接访问。不设此项,前端加载图片时会返回403错误。
后端集成TOS SDK上传图片
以Node.js为例(其他语言同理):
安装SDK:npm install @volcengine/tos-nodejs-sdk-v4
初始化客户端(注意替换真实参数):
const { TOSClient } = require('@volcengine/tos-nodejs-sdk-v4');const client = new TOSClient({region: 'cn-beijing',accessKeyId: '你的AccessKey ID',accessKeySecret: '你的AccessKey Secret',bucket: 'your-bucket-name',endpoint: 'https://tos-cn-beijing.volces.com'});
接收用户上传的图片文件流 → 调用client.putObject方法上传 → 指定key为带目录结构的唯一路径(如uploads/20260805/abc123.jpg)→ 成功后拼接公开URL:https://your-bucket-name.tos-cn-beijing.volces.com/uploads/20260805/abc123.jpg。
前端展示TOS图片
后端返回上述拼接好的URL → 前端用<img src="https://...?x-oss-process=image/resize,p_40">直接渲染即可。
若需防盗链,可在TOS控制台「权限管理」→ 「Referer白名单」中设置允许访问的域名,避免被第三方盗刷流量。











