如何使用'html5'运行时将plupload直接实现到s3？

Question

在这个非常相关的问题 (Upload directly to Amazon S3 using Plupload HTML5 runtime) 中提到，亚马逊现在允许使用 HTML5 上传 CORS，但是是否有人成功配置 plupload 以使用“html5”运行时将文件推送到 s3？对相关问题的回复未提供任何实施细节。

这是我当前的 plupload 配置：

$("#uploader").plupload({
    // General settings
    runtimes: 'html5,flash',
    url: 'http://s3.amazonaws.com/' + $('#Bucket').val(),
    max_file_size: '20mb',
    multipart: true,
    multipart_params: {
        'key': '${filename}', // use filename as a key
        'Filename': '${filename}', // adding this to keep consistency across the runtimes
        'acl': $('#Acl').val(),
        'Content-Type': 'binary/octet-stream',
        'success_action_status': '201',
        'AWSAccessKeyId': $('#AWSAccessKeyId').val(),
        'policy': $('#Policy').val(),
        'signature': $('#Signature').val()
    },
    file_data_name: 'file',
    multiple_queues: true,
    filters: [
        { title: "Image files", extensions: "jpg,png,gif,jpeg" }
    ],
    flash_swf_url: '/Scripts/plupload/plupload.flash.swf',
});

上述代码适用于“flash”运行时，因此策略已正确生成和签名。

我是否遗漏了 multipart_params 配置对象中的任何参数？

另外，我在我的 s3 存储桶上使用以下 CORS 配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

我是否需要对 s3 存储桶进行任何其他配置更改以允许从“html5”plupload 运行时上传 CORS？

Answer 1

这是我用来让它工作的确切代码...

var params = {};

        $('#uploader').pluploadQueue({
            runtimes: 'html5,flash',
            flash_swf_url: '/js/plupload/1.5.4/plupload.flash.swf', // Have to load locally
            url: 'https://s3.amazonaws.com/my-bucket-name',
            multiple_queues: true,
            preinit: {
                UploadFile: function (up, file) {
                    up.settings.multipart_params = {
                        key: file.name,
                        filename: file.name,
                        AWSAccessKeyId: 'my-aws-access-key',
                        acl: 'private',
                        policy: params[file.name]["policy"],
                        signature: params[file.name]["signature"],
                        success_action_status: '201'
                    }
                }
            },
            init: {
                FilesAdded: function (up, files) {
                    plupload.each(files, function (file) {

                        $.ajax({
                            url: '/r/prepare_raw_upload',
                            type: 'post',
                            data: {
                                acl: 'private',
                                bucket: 'my-bucket-name',
                                file: file.name
                            },
                            success: function (data) {
                                if (data.success) {
                                    params[data.file] = { policy: data.policy, signature: data.signature };
                                }
                                else if (data.message) {
                                    alert(data.message);
                                }
                            }
                        });

                    });
                }
            }
        });

您会在 FilesAdded 事件侦听器中注意到我有一个 ajax 调用。这将从我的服务器中为添加的每个文件检索策略和签名。

这是发回策略和签名的背面代码

public static Dictionary<string, object> prepareUpload(DateTime now, string acl, string bucket, string key, string file)
    {
        Dictionary<string, object> result = new Dictionary<string, object>();
        ASCIIEncoding encoding = new ASCIIEncoding();

        string policy = createUploadPolicy(now, acl, bucket, key);
        result.Add("policy", Convert.ToBase64String(encoding.GetBytes(policy)));
        result.Add("signature", createUploadSignature(policy));
        result.Add("file", file);

        return result;
    }

    public static string createUploadPolicy(DateTime now, string acl, string bucket, string key)
    {
        ASCIIEncoding encoding = new ASCIIEncoding();
        JavaScriptSerializer jss = new JavaScriptSerializer();

        Hashtable policy = new Hashtable();
        policy.Add("expiration", now.AddDays(1).ToString("yyyy'-'MM'-'dd'T'HH':'mm':'ss.fff'Z'"));
        ArrayList conditions = new ArrayList();
        conditions.Add(new Hashtable { { "acl", acl } });
        conditions.Add(new Hashtable { { "bucket", bucket } });
        conditions.Add(new Hashtable { { "key", key } });
        conditions.Add(new ArrayList { "starts-with", "$name", "" });
        conditions.Add(new ArrayList { "starts-with", "$filename", "" });
        conditions.Add(new ArrayList { "starts-with", "$success_action_status", "" });
        policy.Add("conditions", conditions);

        return jss.Serialize(policy);
    }

    public static string createUploadSignature(string policy)
    {
        ASCIIEncoding encoding = new ASCIIEncoding();
        byte[] policyBytes = encoding.GetBytes(policy);
        string policyBase64 = Convert.ToBase64String(policyBytes);

        byte[] secretKeyBytes = encoding.GetBytes(ConfigurationManager.AppSettings["AWSSecretKey"]);
        HMACSHA1 hmacsha1 = new HMACSHA1(secretKeyBytes);

        byte[] policyBase64Bytes = encoding.GetBytes(policyBase64);
        byte[] signatureBytes = hmacsha1.ComputeHash(policyBase64Bytes);

        return Convert.ToBase64String(signatureBytes);
    }

完成这项工作的非常有用的链接是......

How do I make Plupload upload directly to Amazon S3?

http://codeonaboat.wordpress.com/2011/04/22/uploading-a-file-to-amazon-s3-using-an-asp-net-mvc-application-directly-from-the-users-browser/