Question

我需要创建一个能够使用PHP从浏览器直接将多个文件上传到我的AWS S3存储桶的Web表单。

我遇到了单个文件上传的好方法（https://www.sanwebe.com/2015/09/direct-upload-to-amazon-aws-s3-using-php-html）：

<?php
$access_key         = "iam-user-access-key"; //Access Key
$secret_key         = "iam-user-secret-key"; //Secret Key
$my_bucket          = "mybucket"; //bucket name
$region             = "us-east-1"; //bucket region
$success_redirect   = 'http://'. $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; //URL to which the client is redirected upon success (currently self) 
$allowd_file_size   = "1048579"; //1 MB allowed Size

//dates
$short_date         = gmdate('Ymd'); //short date
$iso_date           = gmdate("Ymd\THis\Z"); //iso format date
$expiration_date    = gmdate('Y-m-d\TG:i:s\Z', strtotime('+1 hours')); //policy expiration 1 hour from now

//POST Policy required in order to control what is allowed in the request
//For more info http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-HTTPPOSTConstructPolicy.html
$policy = utf8_encode(json_encode(array(
                    'expiration' => $expiration_date,  
                    'conditions' => array(
                        array('acl' => 'public-read'),  
                        array('bucket' => $my_bucket), 
                        array('success_action_redirect' => $success_redirect),
                        array('starts-with', '$key', ''),
                        array('content-length-range', '1', $allowd_file_size), 
                        array('x-amz-credential' => $access_key.'/'.$short_date.'/'.$region.'/s3/aws4_request'),
                        array('x-amz-algorithm' => 'AWS4-HMAC-SHA256'),
                        array('X-amz-date' => $iso_date)
                        )))); 

//Signature calculation (AWS Signature Version 4)   
//For more info http://docs.aws.amazon.com/AmazonS3/latest/API/sig-v4-authenticating-requests.html  
$kDate = hash_hmac('sha256', $short_date, 'AWS4' . $secret_key, true);
$kRegion = hash_hmac('sha256', $region, $kDate, true);
$kService = hash_hmac('sha256', "s3", $kRegion, true);
$kSigning = hash_hmac('sha256', "aws4_request", $kService, true);
$signature = hash_hmac('sha256', base64_encode($policy), $kSigning);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Aws S3 Direct File Uploader</title>
</head>
<body>
<form action="http://<?= $my_bucket ?>.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
<input type="hidden" name="key" value="${filename}" />
<input type="hidden" name="acl" value="public-read" />
<input type="hidden" name="X-Amz-Credential" value="<?= $access_key; ?>/<?= $short_date; ?>/<?= $region; ?>/s3/aws4_request" />
<input type="hidden" name="X-Amz-Algorithm" value="AWS4-HMAC-SHA256" />
<input type="hidden" name="X-Amz-Date" value="<?=$iso_date ; ?>" />
<input type="hidden" name="Policy" value="<?=base64_encode($policy); ?>" />
<input type="hidden" name="X-Amz-Signature" value="<?=$signature ?>" />
<input type="hidden" name="success_action_redirect" value="<?= $success_redirect ?>" /> 
<input type="file" name="file" />
<input type="submit" value="Upload File" />
</form>
<?php
//After success redirection from AWS S3
if(isset($_GET["key"]))
{
    $filename = $_GET["key"];
    $ext = pathinfo($filename, PATHINFO_EXTENSION);
    if(in_array($ext, array("jpg", "png", "gif", "jpeg"))){
        echo '<hr />Image File Uploaded : <br /><img src="//'.$my_bucket.'.s3.amazonaws.com/'.$_GET["key"].'" style="width:100%;" />';
    }else{
        echo '<hr />File Uploaded : <br /><a href="http://'.$my_bucket.'.s3.amazonaws.com/'.$_GET["key"].'">'.$filename.'</a>';
    }
}
?>
</body>
</html>

它非常适合它，但我需要一个能够一次上传多个上传的解决方案。

页面上的一条评论指明了一种方法：

如果直接上传到S3，AWS仅允许您一次上传一个文件。您可以通过将文件输入设置为“multiple”并循环遍历每个文件来进行多文件上载，通过AJAX进行多次提交。要执行此操作，您需要在要上载的存储桶上设置CORS，否则您将因为它是跨站点脚本而被拒绝。它可以完成，因为我刚刚完成了我自己的项目。

我试图关注，但不确定他究竟是如何建议使用AJAX来使其工作的。表单是否在AJAx请求页面上，我只是提供文件名？

熟悉某个问题的人是否可以请更彻底地向我解释或直接向我提出替代解决方案？

Answer 1

您应该使用multiple="multiple"并使用name="file[]"。

尝试使用：

<form action="http://<?= $my_bucket ?>.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
    <input type="hidden" name="key" value="${filename}" />
    <input type="hidden" name="acl" value="public-read" />
    <input type="hidden" name="X-Amz-Credential" value="<?= $access_key; ?>/<?= $short_date; ?>/<?= $region; ?>/s3/aws4_request" />
    <input type="hidden" name="X-Amz-Algorithm" value="AWS4-HMAC-SHA256" />
    <input type="hidden" name="X-Amz-Date" value="<?=$iso_date ; ?>" />
    <input type="hidden" name="Policy" value="<?=base64_encode($policy); ?>" />
    <input type="hidden" name="X-Amz-Signature" value="<?=$signature ?>" />
    <input type="hidden" name="success_action_redirect" value="<?= $success_redirect; ?>" /> 
    <input type="file" name="file[]" multiple="multiple" />
    <input type="submit" value="Upload File" />
</form>

Answer 2

您可以使用btoa（）将文件编码为base64字符串格式，并将其作为数组发送到您的服务器 [{"base64encodedFile 1",....,"base64encodedFile n"}] 在一个ajax请求中。在您的服务器上，您可以遍历数组，将它们解码回来并将其作为输入流逐个发送到s3。我在java中完成了这个，它工作得很好。

ajax：

$.ajax({
    type: "POST",
    url: "/upload",
    data: [{"base64encodedFile 1",....,"base64encodedFile n"}],
    dataType: "json",
    success: function( data, textStatus, jqXHR) {
      // uploaded
    },
    error: function(jqXHR, textStatus, errorThrown){
      // error
    }
});

服务器端伪代码：

foreach(item in array) {
    decodedFile = base64Decode(item)
    InputStream fis = new ByteArrayInputStream(decodedFile)
    setMetaData() // such as content length, max-age , ...
    PutObjectRequest pro = new PutObjectRequest(getBUCKET_NAME(), 
    fileName, fis, metadata)
    por.setCannedAcl(CannedAccessControlList.PublicRead)
    s3Client.putObject(por)
}

使用PHP从浏览器直接将多个文件上传到AWS S3存储桶

2 个答案: