文档首页/ 对象存储服务 OBS/ SDK参考/ BrowserJS/ 上传对象/ 基于表单上传
更新时间：2024-04-26 GMT+08:00
查看PDF
分享

基于表单上传

开发过程中，您有任何问题可以在github上提交issue。接口参考文档详细介绍了每个接口的参数和使用方法。

基于表单上传是使用HTML表单形式上传对象到指定桶中，对象最大不能超过5GB。

您可以通过ObsClient.createPostSignatureSync生成基于表单上传的请求参数。使用BrowserJS代码模拟表单上传的完整代码示例，参见post-object-sample。您也可以通过如下步骤进行表单上传：

  1. 使用ObsClient.createPostSignatureSync生成用于鉴权的请求参数。
  2. 准备表单HTML页面。
  3. 将生成的请求参数填入HTML页面。
  4. 选择本地文件，进行表单上传。

使用SDK生成用于鉴权的请求参数包括两个：

  • Policy，对应表单中policy字段。
  • Signature，对应表单中的signature字段。

以下代码展示了如何生成基于表单上传的请求参数：

// 创建ObsClient实例
var obsClient = new ObsClient({
    // 认证用的ak和sk硬编码到代码中或者明文存储都有很大的安全风险，建议在配置文件或者环境变量中密文存放，使用时解密，确保安全；本示例以ak和sk保存在环境变量中为例，运行本示例前请先在本地环境中设置环境变量AccessKeyID和SecretAccessKey。
    // 前端本身没有process对象，可以使用webpack类打包工具定义环境变量，就可以在代码中运行了。
    // 您可以登录访问管理控制台获取访问密钥AK/SK，获取方式请参见https://support.huaweicloud.com/intl/zh-cn/usermanual-ca/ca_01_0003.html
    access_key_id: process.env.AccessKeyID,
    secret_access_key: process.env.SecretAccessKey,
    // 这里以中国-香港为例，其他地区请按实际情况填写
    server: 'https://obs.ap-southeast-1.myhuaweicloud.com'
});

// 设置表单参数
var formParams = {
              // 设置对象访问权限为公共读
              'x-obs-acl': obsClient.enums.AclPublicRead, 
              // 设置对象MIME类型
              'content-type': 'text/plain'           
};

// 设置表单上传请求有效期，单位：秒
var expires = 3600;

var res = obsClient.createPostSignatureSync({Expires:expires, FormParams: formParams});

// 获取表单上传请求参数
console.log('\t' + res.Policy);
console.log('\t' + res.Signature);

示例表单HTML代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<form action="http://bucketname.your-endpoint/" method="post" enctype="multipart/form-data">
Object key
<!-- 对象名 -->
<input type="text" name="key" value="objectname" />
<p>
ACL
<!-- 对象ACL权限 -->
<input type="text" name="x-obs-acl" value="public-read" />
<p>
Content-Type
<!-- 对象MIME类型 -->
<input type="text" name="content-type" value="text/plain" />
<p>
<!-- policy的base64编码值 -->
<input type="hidden" name="policy" value="*** Provide your policy ***" />
<!-- AK -->
<input type="hidden" name="AccessKeyId" value="*** Provide your access key ***"/>
<!-- 签名串信息 -->
<input type="hidden" name="signature" value="*** Provide your signature ***"/>

<input name="file" type="file" />
<input name="submit" value="Upload" type="submit" />
</form>
</body>
</html>
  • HTML表单中的policy，signature的值均是从ObsClient.createPostSignatureSync的返回结果中获取。
  • 您可以直接下载表单HTML示例PostDemo。
父主题： 上传对象