7

この非常に関連する質問 ( Plupload HTML5 ランタイムを使用して Amazon S3 に直接アップロードする) で言及されているように、Amazon は HTML5を使用して CORS アップロードを許可するようになりましたが、'html5' ランタイムを使用して s3 にファイルをプッシュするように plupload を正常に構成した人はいますか? 関連する質問への回答では、実装の詳細は提供されません。

これが私の現在の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',
});

上記のコードは「フラッシュ」ランタイムで機能しているため、ポリシーが正しく生成され、署名されています。

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>

「html5」plupload ランタイムからの CORS アップロードを許可するために、s3 バケットに他の構成変更を加える必要がありますか?

4

1 に答える 1

9

これが私がこれを機能させるために使用した正確なコードです...

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);
    }

この作品を作るのに非常に役立つリンクは...

PluploadをAmazonS3に直接アップロードするにはどうすればよいですか？

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

于 2012-11-15T22:38:27.013 に答える