本文主要介绍如何基于POST Policy的使用规则在客户端通过JavaScript代码完成签名,然后通过表单直传数据到OSS。

注意事项

本文档提供的应用服务器代码支持html5、flash、silverlight、html4等协议,请保证您的浏览器支持以上协议。若提示“你的浏览器不支持flash,Silverlight或者HTML5!”,请升级您的浏览器版本。

步骤1:下载应用服务器代码

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

  1. 下载应用服务器代码
  2. 将下载的文件解压。
说明 示例中使用的前端插件是Plupload,您可以根据自己的实际需求更换插件。

步骤2:修改配置文件

打开upload.js文件,修改访问配置。
accessid= '<yourAccessKeyId>';
accesskey= <yourAccessKeySecrety>';
.....
new_multipart_params = {
        ....
        'OSSAccessKeyId': accessid, 
        ....
    };

//如果是STS方式====
accessid = 'STS.ACCESSKEYID';
accesskey = 'STS.ACCESSSECRET';
token = 'STS.token';

.....
new_multipart_params = {
        ....
        'OSSAccessKeyId': accessid, 
        'x-oss-security-token':token
        ....
    };
//===========
host = 'http://post-test.oss-cn-hangzhou.aliyuncs.com';
  • accessid:您的AccessKeyId。
  • accesskey:您的AcessKeySecret。
  • token:您的STS token。使用STS方式验证时,您需要通过STS API获取STS AccessKeyId、STS AcessKeySecret、SecurityToken,详情请参见STS临时授权访问OSS。若您的AccessKeyId和AcessKeySecret为主账号或永久子账号AK,此项可不填。
  • host:您的OSS访问域名,格式为BucketName.Endpoint,例如post-test.oss-cn-hangzhou.aliyuncs.com。 关于OSS访问域名的介绍请参见OSS访问域名使用规则

步骤 3:设置CORS

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

  1. 登录OSS管理控制台
  2. 在左侧存储空间列表中,单击目标存储空间名称,打开该存储空间概览页面。
  3. 单击基础设置页签,找到跨域设置区域,然后单击设置
  4. 单击创建规则,配置如下图所示。
    说明 为了您的数据安全,实际使用时,来源栏建议您填写自己需要的域名。更多配置信息请参见设置跨域访问

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

  1. 在解压的应用服务器代码文件夹中打开index.html文件。
  2. 单击选择文件,之后选择一个或多个文件,并选择上传后的文件名命名规则及上传后文件所在目录。
  3. 单击开始上传,并等待上传完成。
  4. 上传成功后,您可以登录OSS控制台查看上传结果。

核心代码解析

因为OSS支持POST协议,所以只要在Plupload发送POST请求时带上OSS签名即可。核心代码如下:

var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,html4',
    browse_button : 'selectfiles',
    //runtimes : 'flash',
    container: document.getElementById('container'),
    flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
    silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',
    url : host,
    multipart_params: {
        'Filename': '${filename}',
        'key' : '${filename}',
        'policy': policyBase64,
        'OSSAccessKeyId': accessid,
        'success_action_status' : '200', //让服务端返回200,不设置则默认返回204
        'signature': signature,
        'x-oss-security-token':token
    },
 ....
}

上述代码中,’Filename’: ‘${filename}’表示上传后保持原来的文件名。如果您想上传到特定目录如abc下,且文件名不变,请修改代码如下:

multipart_params: {
        'Filename': 'abc/' + '${filename}',
        'key' : '${filename}',
        'policy': policyBase64,
        'OSSAccessKeyId': accessid,
        'success_action_status' : '200', //让服务端返回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/"; 
    }
  • 上传签名

    上传签名主要是对policyText进行签名,最简单的例子如下:

    var policyText = {
        "expiration": "2020-01-01T12:00:00.000Z", // 设置Policy的失效时间,如果超过失效时间,就无法通过此Policy上传文件
        "conditions": [
        ["content-length-range", 0, 1048576000] // 设置上传文件的大小限制,如果超过限制,文件上传到OSS会报错
        ]
    }

总结

在客户端通过JavaScript代码完成签名,无需过多配置,即可实现直传,非常方便。但是客户端通过JavaScript把AccesssKeyID和AccessKeySecret写在代码里面有泄露的风险,建议采用服务端签名后直传

常见问题

  • 如何限制文件上传类型?

    OSS暂时无法设置仅允许上传指定文件类型。

  • 上传后如何获取文件URL?

    您可以在上传时配置上传到指定目录项,文件将上传到指定的目录中。您可以根据Bucket访问域名及文件访问路径获取文件的URL,详情请参见上传Object后如何获取访问URL?

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