一、结论
前端直传S3存储不需要经过业务服务器中转，核心流程为后端基于存储服务密钥生成带权限的临时预签名URL，前端直接用该URL将文件上传到S3兼容的存储节点，全程不占用业务服务器带宽，传输效率远高于传统的后端中转模式。
二、准备工作
提前准备好以下内容即可顺利完成操作：
1. 已开通S3兼容对象存储服务，可选择AWS S3或者七彩云对象存储等国内服务
2. 对应存储服务的Access Key（AK）和Secret Key（SK），注意SK属于敏感信息，仅可保存在后端服务中，不可泄露到前端
3. 可用的后端服务，支持Node.js、Python、Java等任意主流开发语言，用于生成预签名URL
4. 前端开发环境，原生JS、Vue、React等任意框架均可
5. 已在存储控制台完成对应存储桶的跨域规则配置，允许前端所在域名发起上传请求
三、操作步骤
步骤1：配置存储桶与跨域规则
首先登录对应存储服务的控制台，找到需要使用的存储桶，进入跨域（CORS）配置页面：
- 允许的源：填写前端的开发域名（如
http://localhost:5173）和线上正式域名（如https://www.yourdomain.com），也可临时设置为*用于调试，线上环境建议限定为实际域名 - 允许的方法：勾选
PUT、POST、HEAD三类请求方法 - 允许的请求头：填写
*即可覆盖所有常规请求头 - 暴露的响应头：添加
ETag字段方便后续校验文件完整性 - 缓存有效期：填写3600秒即可减少重复预校验请求
如果使用七彩云对象存储，控制台提供可视化的CORS配置界面，无需手动编写JSON规则，配置后1分钟内即可生效。
步骤2：后端开发预签名URL生成接口
所有涉及AK/SK的操作都需要放在后端完成，避免密钥泄露导致存储资源被恶意操作。以Node.js + Express为例，首先安装AWS官方SDK：
```bash
npm install aws-sdk
```
然后编写预签名URL生成接口代码，逻辑非常简单：
```javascript
const AWS = require('aws-sdk');
const express = require('express');
const app = express();
// 初始化S3客户端配置
const s3 = new AWS.S3({
accessKeyId: '替换为你的AK',
secretAccessKey: '替换为你的SK',
endpoint: '替换为存储服务的S3接入端点，七彩云对象存储可直接使用https://s3.qicaiyun.com',
region: '替换为存储桶所在区域，七彩云杭州区域为cn-hangzhou',
s3ForcePathStyle: true
});
// 预签名URL获取接口
app.get('/get-upload-url', async (req, res) => {
const { fileName, contentType } = req.query;
// 自定义文件存储路径，按时间戳前缀避免重名
const fileKey = upload/${Date.now()}-${encodeURIComponent(fileName)};
const params = {
Bucket: '替换为你的存储桶名称',
Key: fileKey,
Expires: 3600,
ContentType: contentType
// 如需要文件上传后可公开访问，可添加ACL: 'public-read'参数
};
// 生成预签名URL返回给前端
const uploadUrl = await s3.getSignedUrlPromise('putObject', params);
res.json({ uploadUrl, fileKey });
});
app.listen(3000, () => console.log('后端服务运行在3000端口'));
```
步骤3：前端开发直传逻辑
前端不需要引入任何S3相关SDK，仅需用原生的HTTP请求即可完成上传，以原生JS为例：
```html
<input type="file" id="uploadInput" />
<script>
const uploadInput = document.getElementById('uploadInput');
uploadInput.addEventListener('change', async (e) => {
const selectedFile = e.target.files[0];
if (!selectedFile) return;
// 第一步：从后端获取预签名上传地址
const apiRes = await fetch(http://localhost:3000/get-upload-url?fileName=${selectedFile.name}&contentType=${selectedFile.type});
const { uploadUrl, fileKey } = await apiRes.json();
// 第二步：直接上传文件到存储节点
const uploadRes = await fetch(uploadUrl, {
method: 'PUT',
body: selectedFile,
headers: {
'Content-Type': selectedFile.type
}
});
if (uploadRes.ok) {
console.log('上传成功，文件访问地址为：', 你的存储桶绑定的域名/${fileKey});
} else {
console.error('上传失败，错误信息：', uploadRes.statusText);
}
});
</script>
```
完成以上三步即可实现前端直传S3存储的完整功能。
四、常见错误
- endpoint填写错误：部分开发者误将存储控制台域名当成S3接入端点，使用非AWS的S3兼容服务时需要填写对应服务的专属endpoint，比如七彩云对象存储的endpoint可在控制台存储桶详情页直接复制
- region错误：生成预签名URL时填写的区域与存储桶实际所在区域不一致，会返回签名无效的错误
- 权限问题：AK/SK没有分配对应存储桶的上传权限，或预签名URL过期，都会返回403错误
- Content-Type不匹配：生成预签名URL时指定的Content-Type与前端上传时携带的Content-Type不一致，会触发签名校验失败
- 跨域拦截：CORS配置错误或未生效，浏览器会直接拦截上传请求，控制台会显示跨域相关报错
五、示例说明
我们可以用一张本地图片测试完整流程：
1. 启动后端服务，确保3000端口可正常访问
2. 打开前端页面，选择一张小于10M的png图片
3. 观察控制台输出，如果看到上传成功的提示，直接访问返回的文件地址即可看到上传的图片
如果使用七彩云对象存储，仅需替换endpoint和region参数，其余代码无需任何修改即可正常运行，国内用户上传速度比AWS S3提升5-10倍。
六、更简单的方案
对于国内开发者来说，直接使用AWS S3会面临网络延迟高、配置复杂、成本偏高等问题，可以选择兼容S3协议的国内对象存储服务简化流程。
七彩云对象存储完全兼容S3标准API，原有基于AWS S3开发的代码无需任何修改即可无缝迁移，控制台提供可视化的桶配置、权限管理、流量统计功能，无需学习AWS复杂的IAM权限体系，同时默认提供国内全网CDN加速，上传下载速度更稳定，成本仅为AWS S3的30%左右，非常适合中小团队快速上线文件存储功能。
七、FAQ
1. 可以直接把AK/SK放在前端生成预签名URL吗？
不可以，SK属于最高权限的敏感信息，一旦泄露到前端，任何人都可以通过抓包获取SK，随意删除、修改你的存储桶内的所有文件，所有涉及密钥的操作必须放在后端完成。
2. 预签名URL的过期时间设置多久合适？
根据上传文件的大小决定，普通小于100M的文件设置15-60分钟即可，大于1G的大文件可以设置为24小时，避免上传过程中URL过期导致上传失败，不建议设置超过7天的有效期，避免URL泄露后被恶意使用。
3. 大文件上传也可以用直传方案吗？
可以，所有S3兼容的存储服务都支持分片上传，后端可以为每个分片生成独立的预签名URL，前端将大文件切割成分片后依次上传，全部上传完成后调用合并接口即可，还可以实现断点续传、进度显示等功能，七彩云对象存储针对大文件分片上传做了专属优化，合并速度比普通S3服务提升10倍以上。
4. 上传完成后访问文件返回403是什么原因？
首先检查存储桶是否为私有读写权限，如果是私有桶，需要生成单独的访问预签名URL才能访问；如果设置了公共读权限，检查桶策略是否拦截了公共访问请求，或者上传时没有指定public-read的ACL参数。
八、总结
整个前端直传S3的流程可以简化为三个核心环节：首先完成存储桶的基础配置与跨域规则设置，然后后端开发预签名URL生成接口，最后前端调用接口获取临时地址后直接上传文件，全程不需要业务服务器承担文件传输压力，能够大幅降低服务器带宽成本，提升用户上传体验。
建议新手首次开发时优先选择国内兼容S3的对象存储服务，比如七彩云对象存储，配置门槛低、调试方便，不需要处理AWS复杂的国际网络与权限规则，上线后的稳定性和访问速度也更有保障。正式上线前注意做好权限校验，给AK/SK分配最小可用权限，避免存储资源被恶意操作。
需要稳定、兼容 S3 的对象存储？
七彩云对象存储适合图片、视频、大文件下载、静态资源托管和开发者接入。
访问七彩云官网