文档首页/ 对象存储服务 OBS/ 最佳实践/ 数据直传OBS/ Web端直传OBS并设置上传回调
更新时间:2025-08-14 GMT+08:00
分享

Web端直传OBS并设置上传回调

应用场景

常见的Web端上传方式是用户通过浏览器上传文件至应用服务器,再由应用服务器上传至OBS,如图1所示,数据需要在应用服务器中转,传输效率较低,且多任务同时上传时应用服务器压力很大。

图1 常见的Web端上传文件方式

本文介绍一种在Web端利用PostObject接口直传文件至OBS并设置上传回调的方法,即使用表单上传方式上传文件至OBS,上传成功后会回调指定的地址。如方案架构所示,该方案省去了在应用服务器中转文件这一步骤,由Web端直传文件至OBS,提高了传输效率,且不会对服务器产生压力,同时服务端签名后直传可以保证传输的安全性。

方案架构

图2 Web端PostObject直传并设置上传回调架构图

整个Web端直传文件至OBS并设置上传回调的请求流程如下:

  1. 用户通过Web客户端向服务端发送上传安全策略请求;
  2. 服务端使用访问凭证和上传安全策略计算签名,然后向Web端返回上传安全策略和签名;
  3. 用户使用Web端构建的HTML表单上传文件至OBS并设置上传回调;
  4. OBS向服务端发送回调请求;
  5. 服务端返回响应至OBS;
  6. OBS返回上传结果至Web端。

安全策略(policy)的作用是限制表单上传的内容,例如规定表单上传对象的对象名前缀必须以“prefix01”开头,使用policy能够帮助您更好的管控桶中的文件。

资源和成本规划

表1 资源规划

区域

资源

资源名称

资源说明

数量

费用

华北-北京四

OBS桶

post-callback-demo

用于存储用户上传文件的桶。

您需要在OBS控制台创建桶。

1

根据文件占用的存储空间收费,具体请参见存储费用

-

文件

demo-object.txt

用于上传的文件。

您需要提前准备好上传的文件。

1

-

-

AK/SK

AK/SK

AK/SK为访问OBS的凭证,服务端使用AK/SK生成签名,进行用户鉴权。

AK/SK相关内容,详情请参见访问密钥

1

-

操作流程

要实现Web端直传OBS并设置上传回调,需要以下三步:

  1. 创建桶并配置CORS规则:在OBS控制台创建一个桶,用于存储用户上传的文件;同时为桶配置跨域资源共享(CORS),以允许来自Web端的跨域名访问。
  2. 服务端生成签名:服务端使用访问凭证和上传策略(如:桶名称、对象名前缀、过期时间等)生成签名,授权用户在指定时间内完成文件上传。
  3. Web端通过表单上传对象并设置上传回调:Web端在HTML表单中构建请求并设置上传回调,此请求使用POST表单上传来直接调用OBS的服务端,实现文件上传。

实施步骤

结果验证

HTML表单中包含一个文件选择框和一个上传按钮,用户可以选择想要上传的文件然后提交表单。

当表单提交时,JavaScript代码会请求服务器获取本次上传所需要的签名和回调信息,得到正确响应之后,会构造一个FormData对象, 然后填充所有必要数据,通过fetch方法发送POST请求到OBS的服务端,完成文件上传,上传成功后会回调callbackUrl设置的地址。

图4 表单上传回调示例

通过表单上传一个名为“demo-object”的文件至桶“post-callback-demo”中,上传后在OBS桶列表中的“post-callback-demo”中可以看到“demo-object”文件,即表示成功通过表单上传文件。

图5 查看所上传的文件

相关文档

使用其它编程语言的Web框架和OBS的SDK计算POST上传签名信息,具体参考如下:

Java

Python

C不支持

Go不支持

BrowserJS

.NET不支持

Android

iOS不支持

PHP

Node.js

相关文档