如何实现客户端签名直传_对象存储 OSS-阿里云帮助中心

客户端签名直传是指在客户端生成签名，使用签名上传文件到OSS。客户端可以直接将文件上传至OSS，减少了中间环节，因此可以加快上传速度。本文介绍如何进行客户端签名直传。

注意事项

在客户端通过JavaScript代码完成签名，无需过多配置，即可实现直传，非常方便。但是客户端通过JavaScript把AccesssKey ID和AccessKey Secret写在代码里面有泄露的风险，强烈建议使用服务端签名Web端直传或者STS临时授权访问OSS。
本文档提供的应用服务器代码支持html5、flash、silverlight、html4等协议，请保证您的浏览器支持以上协议。如果提示“你的浏览器不支持flash,Silverlight或者HTML5！”，请升级您的浏览器版本。

操作步骤

快速部署

您可以使用资源编排ROS一键配置1个云服务器ECS实例和1个对象存储OSS Bucket，并在云服务器ECS实例上部署浏览器客户端源码，从而快速体验客户端签名直传。使用资源编排ROS快速体验客户端签名直传的操作步骤如下。

一键部署云资源。
1. 打开一键配置模板链接。
2. 在资源编排 ROS控制台的使用新资源（标准）页面的配置模板参数页签下，输入资源栈名称，输入新建OSS Bucket的名称，设置新购ECS的可用区、实例类型、系统盘类型、实例密码，然后单击创建。
  资源栈的资源栈信息页签下的状态显示创建中。
3. 资源栈的状态显示创建成功后，单击输出页签，查看一键部署的云服务器ECS实例、OSS Bucket等资源。
体验客户端签名直传。
1. 在输出页签下，复制UploadPath的值，然后在浏览器中打开。
2. 在OSS web直传页面，单击选择文件，选择指定类型的文件，然后单击开始上传。
体验完成后，释放测试资源，避免继续产生费用。
1. 资源栈页面的右上角，单击删除。
2. 在删除资源栈页面，确保删除方式为释放资源，然后单击确定。

手动部署

步骤1：下载浏览器客户端代码

本示例采用Plupload直接提交表单数据（即PostObject）到OSS，可以运行于PC浏览器、手机浏览器、微信等。您可以同时选择多个文件上传，并设置上传到指定目录和设置上传文件名称是随机文件名还是本地文件名。您还可以通过进度条查看上传进度。

下载浏览器客户端代码。
将下载的文件解压。

说明

示例中使用的前端插件是Plupload，您可以根据实际需求更换插件。

步骤2：修改配置文件

修改访问配置。

打开upload.js文件后，您可以通过以下两种方式修改访问配置。

阿里云RAM用户

// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
accessid= 'yourAccessKeyId';
accesskey= 'yourAccessKeySecret';
// 填写OSS访问域名，格式为BucketName.Endpoint，例如http://examplebucket.oss-cn-hangzhou.aliyuncs.com。
host= 'yourHost';

.....
new_multipart_params = {
        ....
        'OSSAccessKeyId': accessid, 
        ....
    };

STS服务

// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
accessid= 'yourAccessKeyId';
accesskey= 'yourAccessKeySecret';
// 填写OSS访问域名，格式为BucketName.Endpoint，例如http://examplebucket.oss-cn-hangzhou.aliyuncs.com。
host = 'http://examplebucketbucket.oss-cn-hangzhou.aliyuncs.com';
// 填写指定角色的ARN，例如acs:ram::137918634953****:role/test。
STS_ROLE = '';

.....
new_multipart_params = {
        ....
        'OSSAccessKeyId': STS.accessid, 
        // 从STS服务获取的安全令牌（SecurityToken）。
        'x-oss-security-token':STSToken,
        ....
    };

关于角色ARN的更多信息，请参见AssumeRole。
关于获取STS返回的临时访问密钥和安全令牌的具体步骤，请参见使用STS临时访问凭证访问OSS。

修改policyText配置，修改过期时间（expiration）和上传文件大小范围（content-length-range）。

var policyText = {
    "expiration": "2023-12-01T12:00:00.000Z", // 设置Policy的有效期，格式为UTC时间。如果Policy失效，将无法上传文件。
    "conditions": [
    ["content-length-range", 0, 1048576000] // 限制上传文件的大小，单位为字节，此处限制文件大小为1 GB。如果上传的文件大小超过此限制，文件将无法上传到OSS。如果未设置该限制，则默认文件大小最大为5 GB。
    ]
}

更多信息，请参见附录：Post Policy。

步骤3：设置CORS

客户端进行表单直传到OSS时，会从浏览器向OSS发送带有Origin的请求消息。鉴于OSS对带有Origin头的请求消息会进行跨域规则（CORS）的验证，您需要为Bucket设置跨域规则以支持Post方法。

登录OSS管理控制台。
单击Bucket 列表，然后单击目标Bucket名称。
在左侧导航栏，选择数据安全 > 跨域设置。
在跨域设置页面，单击创建规则，配置如下图所示。
重要
为了您的数据安全，实际使用时建议将来源填写为实际允许访问的域名。更多信息。请参见设置跨域访问。

步骤4：体验客户端签名直传

在解压的客户端代码文件夹中打开index.html文件。
单击选择文件，选择一个或多个文件，然后选择上传后的文件名命名规则及上传后文件所在目录。
单击开始上传，并等待上传完成。
上传成功后，您可以登录OSS控制台查看上传结果。

核心代码解析

OSS支持POST协议，您只需要在Plupload发送POST请求时携带OSS签名。

说明

为确保代码正常运行，建议将参数OSSAccessKeyId置于key、success_action_status等参数前。

核心代码

function set_upload_param(up, filename, ret)
{
  g_object_name = g_dirname;
  if (filename != '') {
      suffix = get_suffix(filename)
      calculate_object_name(filename)
  }
  new_multipart_params = {
      'OSSAccessKeyId': accessid,
      'key' : g_object_name,
      'policy': policyBase64,
      'success_action_status' : '200', // 如果不设置success_action_status为200，则文件上传成功后返回204状态码。
      'signature': signature,
  };

  up.setOption({
      'url': host,
      'multipart_params': new_multipart_params
  });

  up.start();
}
　....

保持文件不变

'key': g_object_name表示上传后的文件路径。如果您希望上传后保持原来的文件名，则将该字段改为'key': '${filename}'。代码示例如下：

new_multipart_params = {
  'OSSAccessKeyId': accessid,
  'key': '${filename}',
  'policy': policyBase64,
  'success_action_status' : '200', // 如果不设置success_action_status为200，则文件上传成功后返回204状态码。
  'signature': signature,
};

上传至特定目录且文件名不变

如果您需要将文件上传至特定目录（例如abc）且文件名不变，则将该字段改为'key': 'filepath' + '${filename}'。代码示例如下：

new_multipart_params = {
  'OSSAccessKeyId': accessid,
  'key': 'abc/' + '${filename}',
  'policy': policyBase64,
  'success_action_status' : '200', // 如果不设置success_action_status为200，则文件上传成功后返回204状态码。
  'signature': signature,
};

设置为随机文件名

如果需要在上传时设置为随机文件名，后缀保持跟客户端文件一致，可以将函数修改为：

function check_object_radio() {
    g_object_name_type = 'random_name';
}

设置为指定文件名

如果需要在上传时设置为指定的文件名，可以将函数修改为：

function check_object_radio() {
    g_object_name_type = 'local_name';
}

设置上传目录

您可以将文件上传到指定目录下。以下示例用于将上传目录名称修改为abc/，注意目录名称必须以正斜线（/）结尾。

function get_dirname() {
    g_dirname = "abc/"; 
}

常见问题

如何限制上传文件的格式？

您可以利用Plupload的filters属性设置上传的过滤条件，例如设置上传的图片类型、上传的文件的大小等。详细代码请参见设置上传过滤条件。

上传后如何获取文件URL？

您可以根据Bucket访问域名及文件访问路径获取文件的URL，详情请参见如何获取单个或多个文件的URL？

如何获取已上传文件的MD5值？

您需要按F12打开开发者模式，之后开始上传文件。文件上传成功后在响应头中可以查看文件的MD5，如下图所示。