Blueimp 文件上传 - 直接多次上传到 S3

Question

在过去几天的搜索之后，我发现有近 30 个不同的人在问同样的问题，但我没有找到答案。一对夫妇报告说他们找到了解决方案，但没有提供，所以我希望有人能在这里回答。

---

使用blueimp jQuery File Upload，如何将多个文件直接上传到Amazon S3？

问题：S3每个请求只接受一个文件。

解决方案：使用blueimp jQuery File Upload 为每个文件发送单独的请求。

障碍：我不知道如何让blueimp jQuery File Upload 做到这一点。

---

解决方案尝试

指南在这里：https://github.com/blueimp/jQuery-File-Upload/wiki/Upload-directly-to-S3

S3 目前需要比指南中显示的更多的表单字段。这是我的代码的精简版：

$(':file').each(function(i, el) {

    var fileInput = $(el);
    var form = fileInput.parents('form:first');

    fileInput.fileupload({
        forceIframeTransport: true,
        autoUpload: true,
        singleFileUploads: true, //default anyway
        add: function(event, data) {
            var files = data.files || [];
            var nextInQueue = files[0]; //this is a queue, not a list
            console.log('nextInQueue:', nextInQueue);
            if (!nextInQueue) return;

            var fileData = {name: nextInQueue.name, mime: nextInQueue.type, size: nextInQueue.size};

            $.ajax({
                url: '/s3stuff',
                type: 'POST',
                dataType: 'json',
                data: {'file': fileData},
                async: false,
                success: function(res) {
                    form.find('input[name="key"]').val(res.key);
                    form.find('input[name="AWSAccessKeyId"]').val(res.AWSAccessKeyId);
                    form.find('input[name="policy"]').val(res.policy);
                    form.find('input[name="signature"]').val(res.signature);
                    form.find('input[name="acl"]').val(res.acl);
                    form.find('input[name="success_action_status"]').val(res.success_action_status);
                    form.find('input[name="Content-Type"]').val(nextInQueue.type);
                    form.attr('action', res.url);

                    data.submit(); //why is this submitting all files at once?
                }
            });
        },
        fail: function(err) {
            console.log('err:', err.stack);
        }
    });
});

---

错误

当我尝试上传单个文件时，效果很好！但是当我尝试上传多个文件时，S3 返回此400 错误：

<?xml version="1.0" encoding="UTF-8"?>
<Error>
    <Code>InvalidArgument</Code>
    <Message>POST requires exactly one file upload per request.</Message>
    <ArgumentName>file</ArgumentName>
    <ArgumentValue>2</ArgumentValue>
</Error>

---

分析

blueimp jQuery File Upload documentation 这么说（在add 下）：

如果启用了 singleFileUploads 选项（这是默认设置），将为 XHR 文件上传选择中的每个文件调用一次 add 回调，data.files 数组长度为 1，因为每个文件都是单独上传的.

这就是我卡住的地方：
如果 "each file is uploaded individually" 到 S3，为什么 S3 不这样说？

此外，无论文件数量如何，add 函数都只运行一次。 （我用console.log 声明验证了这一点。）我看到了两个可能的原因：

1. 插件在一次失败后停止进一步的提交。
2. 插件未单独提交文件（无论出于何种原因）。

---

是我的代码不正确，是我在插件中遗漏了一个选项，还是插件不支持多次直接上传到 S3？

---

更新

这是一个用于快速测试的 html 文件： http://pastebin.com/mUBgr4MP

Answer 1

这里是 JQuery 文件上传的作者。

文件未单独提交的原因是forceIframeTransport 选项，在您的示例中设置为true。

documentation for the singleFileUploads option 声明如下：

默认情况下，选择的每个文件都是使用XHR 类型上传的单独请求上传的。

虽然documentation for the forceIframeTransport option 声明如下：

将此选项设置为 true 以强制 iframe 传输上传，即使浏览器能够上传 XHR 文件。

因此，解决方案是enable CORS on the S3 bucket 并且不启用forceIframeTransport 选项。

顺便说一句，大多数集成示例都是用户贡献的（包括 S3 上传指南）。 这是另一个使用 S3 CORS 功能的，可能会帮助你（虽然还没有测试过）： http://pjambet.github.io/blog/direct-upload-to-s3