Question

我正在尝试使用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存储桶中？

感谢您的帮助。

Answer 1

对于可能遇到同样问题的其他人，.pickMultiple（） - ＆gt; .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的其他产品。也许你呢？

Filepicker.io - 在S3存储桶中自动存储文件，停止.pickMultiple

1 个答案: