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/

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

1 个答案: