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

Posted 2023-03-04

【中文标题】如何使用\'html5\'运行时将plupload直接实现到s3？

【英文标题】：How to implement plupload directly to s3 with 'html5' runtime?如何使用'html5'运行时将plupload直接实现到s3？

【发布时间】：2012-10-28 06:32:13

【问题描述】：

在这个非常相关的问题 (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？

【参考方案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/

【讨论】：

您使用的 CORS 配置看起来也不错。我的看起来一模一样。

知道了。谢谢你们的帮助。

@sunnymtn 你能告诉我完整的代码吗？我看不出您将如何实现您提供给 njebert 显示的代码的代码。