1

我正在尝试使用 Filepicker.io 作为上传器，但为了为有效负载中的每个文件触发 onSuccess 事件，我使用了 .pickMultiple 和 .store 方法的组合。像这样：

    filepicker.pickMultiple(function(fpfiles){

        for(var i = 0; i < fpfiles.length; i++){

            //Clean the filename

            //Check duplicate

            //Store the file on S3
            filepicker.store(
               fpfiles[i].url,
               {location: 'S3', path: 'filepicker/' + fpfiles[i].filename},
               function(my_uploaded_file){
                  //Do some other cool stuff ...
               }
            );
        }               
    });

（这与使用 .pickAndStore 方法相反，该方法只会在整个有效负载完成传输后触发 onSuccess 事件）

我遇到的问题是，似乎认为 .pickMultiple 方法是“自动”将文件的副本保存在我的 S3 存储桶的根目录中；所以我最终得到了同一个文件的两个副本。

例如：

如果我将 my_file.png 上传到存储桶中名为 IMAGES 的文件夹，我应该得到http://s3.amazonaws.com/my_bucket/IMAGES/my_file.png的结果

这正在发生，但我也得到了： http ://s3.amazonaws.com/my_bucket/UNIQUE_ID_my_file.png

任何人都知道如何防止 .pickMultiple 自动将文件添加到我的 S3 存储桶中？

谢谢你的帮助。

4

1 回答 1

1

对于可能遇到同样问题的其他任何人，.pickMultiple() —> .store() 方法是死路一条。为有效负载中的每个文件触发 onSuccess 事件的（唯一）方法是使用 vanilla <input type="file" />onChange 事件来获取元素的 FILES 数组，然后遍历 FILES 并为数组中的每个文件调用 .store() .

这个例子：

$('#BTN_upload').change(function(){

    var files = $(this)[0].files;

    //So you can see what should be uploading
    console.log(JSON.stringify(files));

    //Loop the files array to store each file on S3
    for(var i = 0; i < files.length; i++){

        //All good. Now execute the .store call
        filepicker.store(

            //The file to upload
            files[i],

            //The file options
            //(I'm storing the files in a specific folder within my S3 bucket called 'my_folder')
            //This is also where you'll rename your file to whatever you'd like
            {path: 'my_folder/' + files[i].name},

            //OnSuccess
            function(FPFile){
                console.log("Store successful: ", JSON.stringify(FPFile));
                //Now possibly call .remove() to remove the 'temp' file from FP.io
            },

            //OnError
            function(FPError){
                console.log(FPError.toString());
            },

            //OnProgress
            function(progress){
                console.log("Loading: " + progress + "%");
            }
       );

    }

});
filepicker.setKey('MY_FP.IO_KEY');

和 HTML：

<input id="BTN_upload" type="file" />

这个例子不是一个成品。您仍然需要滚动您自己的用户反馈（例如带有进度条的队列显示）、重复检查、重命名等。但这都是非常简单的事情。

注意：这仅适用于本地到 S3 的上传。我不确定如何整合 FP.io 的其他资源。也许你会？

于 2013-03-29T02:17:04.643 回答