是否可以在创建常规精细上传器实例的同时创建 s3 上传器实例？

Question

我以两种方式使用精细上传器，但都在一个过程中。我有我拆分和合并的 pdf 文件，并使用基本的精细上传器实例在本地执行此操作。完成后，我想将每个合并文件上传到我们的 amazon s3 存储桶。我在同一个 javascript 文件中有两个很好的上传器实例。但是，s3 实例给出了错误，因为它是在 jquery 包装器中定义的。

此页面的流程包括以下内容：

1. 用户选择第一个上传者上的上传按钮来上传 pdf文件

2. 会弹出一个模式让用户选择是否 按原样上传文件或将 pdf 文件拆分为单独的页面 如果用户选择按原样上传... s3 存储桶精细上传器是 调用（现在不工作）；如果用户选择拆分 pdf 文件，文件拆分后会弹出另一个模式并显示 供用户按文档类型重新组织的各个页面。

3. 在将 pdf 页面重新组织为单独的文档类型后，它们被合并 成新的 pdf 文件。

4. 完成每个合并文件后，我想将该文件上传到该用户的 s3 存储桶。这是需要调用第二个上传器实例来添加文件然后上传文件的地方。

当用户选择第一个上传按钮时，我在 javascript 控制台（使用 Chrome）中收到以下错误消息：

VM33414:16 
Uncaught TypeError: Cannot read property 'uuid' of undefined**
qq.basePublicApi.getUuid @ VM33414:16
qq.basePrivateApi._onSubmitDelete @ VM33414:17
qq.uiPrivateApi._onSubmitDelete @ VM33414:18
qq.basePublicApi.deleteFile @ VM33414:16
(anonymous function) @ VM33416:224
b.event.dispatch @ jquery-1.9.1.min.js:3
v.handle @ jquery-1.9.1.min.js:3
VM33416:157 

merged file: /var/www/html/ajax/common/files/044da577-e054-407a-95a5-aaa17899897b/1_TestDoc5_W9.pdf
VM33416:165 Uncaught TypeError: $(...).fineUploaderS3 is not a function
jQuery.ajax.success @ VM33416:165
c @ jquery-1.9.1.min.js:3
p.fireWith @ jquery-1.9.1.min.js:3
k @ jquery-1.9.1.min.js:5
r @ jquery-1.9.1.min.js:5
VM33416:157 

merged file: /var/www/html/ajax/common/files/044da577-e054-407a-95a5-aaa17899897b/1_TestDoc5_License.pdf
VM33416:165 Uncaught TypeError: $(...).fineUploaderS3 is not a function
jQuery.ajax.success @ VM33416:165
c @ jquery-1.9.1.min.js:3
p.fireWith @ jquery-1.9.1.min.js:3
k @ jquery-1.9.1.min.js:5
r @ jquery-1.9.1.min.js:5
VM33416:157 

merged file: /var/www/html/ajax/common/files/044da577-e054-407a-95a5-aaa17899897b/1_TestDoc5_Other.pdf
VM33416:165 Uncaught TypeError: $(...).fineUploaderS3 is not a function

这是我的脚本文件：

var thisArray=[];
var pdfoptions=[];
var mydate = new Date();
var month = mydate.getMonth() + 1 ;
var today = month + '/' + mydate.getDate() + '/' +  mydate.getFullYear();

//s3 instance
$('#s3-uploader').fineUploaderS3({
    debug: true,
    autoUpload: false,
    uploaderType: 'basic',
    request: {
        endpoint: 'rog-zone.s3.amazonaws.com',
        accessKey:'################'
    },
    objectProperties: {
        // Since we want all items to be publicly accessible w/out a server to return a signed URL
        acl: "public-read"
    },
    signature: {
        endpoint: "/assets/plugins/fine-uploader/signature/endpoint.php"
    },
    validation: {
        itemLimit: 5,
        sizeLimit: 15000000
    }
    }).on('submit', function (event,id, name) {
        console.log("[on submit] id:"+id+ " and name:"+name);
         return new Promise(function(resolve, reject) {
            resolve();
         });
    }).on('complete', function(event,id,fileName,responseJSON,xhr){
            console.log("[on complete]:"+id+ " and filename:"+fileName);
            var $fileEl = $(this).fineUploaderS3("getItemByFileId", id);            

    }).on('upload', function(event, id, name, isError,responseJSON) {
            var obj = JSON.stringify(responseJSON);
            console.log("[on Upload] id:"+id+ " and response = "+obj);
    }
);


//manual file uploader for local processing.  WHen done, upload merged file to s3 bucket
var manualUploader = new qq.FineUploader({
        element: document.getElementById("fine-uploader"),
        template: 'qq-template-manual',
        debug: true,
        request: {
            endpoint: "/ajax/common/endpoint.php"
        },
        deleteFile: {
            enabled: true,
            endpoint: "/ajax/common/endpoint.php"
        },
        chunking: {
            enabled: true
        },
        resume: {
            enabled: true
        },
        retry: {
            enableAuto: true,
            showButton: true
        },
        callbacks: {
            onUpload: function (id, name) {
                console.log("onUpload");
            },
            onComplete: function(id, fileName, responseJSON){
                console.log("onComplete >> id:"+id+ "; filename:"+fileName+"; folder:"+responseJSON.uuid);
                var uuid = responseJSON.uuid;
                $("#splitter_uuid").val(uuid);
                var filetosplit = uuid+"/"+fileName;
                var imgsrc = 'ajax/common/files/'+uuid+'/';
                var fileinfo = fileName.split(".");
                var fileprefix = fileinfo[0];
                $("#splitter_filename").val(fileName);

                jQuery('#pdfHandler').modal();
                jQuery('#btnUploadPDF').click(function () {
                    return true;
                });
                jQuery('#btnSplitPDF').click(function (e) {
                    jQuery.ajax({url: "http://52.11.64.64/ajax/common/pdfsplitter.php?pdf="+filetosplit,
                        success: function(result){
                            //console.log("result from ajax:"+result);
                            jQuery("#pagecounttext").text("There are "+result+" pages to split.  Please indicate how you would like to organize these files below.");
                            for (i=1;i<=result;i++){
                                var imgfile = fileprefix+'_'+i+'.jpg';
                                var pdfpage = '<a href="#" class="btn pdf-page text-inverse p-0" data-page-id="'+i+'"><img class="imgsplit" src="'+imgsrc+imgfile+'" height=90 border="1"><a/>';
                                //<i class="btl bt-file bt-3x"></i>
                                jQuery("#pdfpages").append(pdfpage);
                            }
                            //show modal where user selects how to organize pages with document type
                            $("#pdfSplitter").modal("show");
                            //add pages selected to document type
                            jQuery('a.pdf-page').on('click',function(e){
                                e.preventDefault();
                                var thisPageID=jQuery(this).data("page-id");
                                thisArray.push(thisPageID);
                                thisArray.sort();
                                jQuery(this).attr("disabled",true);
                                jQuery('#pdfSplitterTable tr.active td input').val(thisArray);                              
                                //save selections in local array since this element does not seem to persist to when it is needed
                                var thisoption = jQuery("#pdfSplitterTable tr.active td select").val();


                            });     

                            jQuery('#btnAddDocumentRow').on('click',function(e){
                                e.preventDefault();
                                var originalSelID=jQuery('#pdfSplitterTable tr.original td select').attr('id');
                                var pdfSplitterTableLen=jQuery('#pdfSplitterTable tr').length;
                                jQuery('#pdfSplitterTable tr').removeClass('active');
                                jQuery('#pdfSplitterTable tr:last').clone().insertAfter('#pdfSplitterTable tr:last');
                                jQuery('#pdfSplitterTable tr:last').removeClass();
                                jQuery('#pdfSplitterTable tr:last').addClass('active');
                                jQuery('#pdfSplitterTable tr:last td input').val('');
                                jQuery('#pdfSplitterTable tr:last td select').attr('id',originalSelID+pdfSplitterTableLen);
                                jQuery('#pdfSplitterTable tr:last td select').attr('name',originalSelID+pdfSplitterTableLen);
                                jQuery("select[name='"+originalSelID+pdfSplitterTableLen+"']").val(0);
                                jQuery("select[name='"+originalSelID+pdfSplitterTableLen+"']").change();    
                                thisArray=[];
                            });                                             
                    }});
                    return true;                        
                });

            },
            onSubmit: function(id,name){
                var fileExtension = name.substring(name.lastIndexOf('.') + 1).toUpperCase();
                if(fileExtension==='PDF'){                    
                    //jQuery('#pdfHandler').modal();
                    return true;
                } else {
                    alert("Please select a PDF file");
                    return false;
                }
            },
            onSubmitted: function (id, name) {
                //console.log("onSubmitted");                
            }
        }
    });

$( document ).ready(function() {

    jQuery('#btnUploadPDF,#btnSplitPDF').on('click',function(e){
        jQuery('#clickfrom').val('nav-tabs');
    });

    jQuery('#btnSplitPDF').on ('click',function(e){
        e.preventDefault();
    });

    jQuery("#btnUploadFiles").on('click',function(e){
        var uuid = jQuery("#splitter_uuid").val();
        var filename = jQuery("#splitter_filename").val();
        var userid = jQuery("#splitter_userid").val();

        jQuery("#pdfSplitterTable td select").each(function() {
            var option = jQuery(this).val();
            var pageids = jQuery(this).closest('td').next().find('input').val();
            console.log("pageids: "+pageids+" and option="+option);//test this
            //add new item to table of documents for user
            var lastclass = jQuery("#document-checklist tr").last().attr("class");
            var newclass = 'even';
            if (lastclass=='even'){newclass = 'odd';}
            jQuery("#document-checklist tbody")
                .append('<tr class="'+newclass+'"><td>'+option
                +'</td><td>Pending Review</td><td></td><td>'+today
                +'</td><td></td><td></td><td><a href="#"></a><i class="fa fa-file-pdf-o"></i></a></td></tr>');      
            //console.log("merge files: "+JSON.stringify(pdfoptions));                  

            jQuery.ajax({url: "http://52.11.64.64/ajax/common/pdfmerge.php?pdf="+filename+"&uuid="+uuid+"&pageids="+pageids+"&option="+option+"&userid="+userid,
                success: function(mergedfile){
                    //result is new merged filename to upload
                    console.log("merged file: "+mergedfile);

                    //HERE IS WHERE I WANT TO UPLOAD TO S3
                    jQuery("#s3-uploader").fineUploaderS3('addFiles',mergedfile);
                    jQuery("#s3-uploader").fineUploaderS3('uploadStoredFiles');             
                }
            });     
        });

        manualUploader.deleteFile();    
    });

});//doc ready

谢谢你， 辛迪

Answer 1

可以在一个 HTML 文档中定义和利用多个 Fine Uploader 端点处理程序。但是，为了做到这一点，由于命名空间冲突，无法使用 jQuery 插件。事实上，jQuery 插件（包装器）已经在 full removal for quite some time 的路线图上。

您很可能希望利用 multiple server type "Windows Azure + Amazon S3 + Traditional" download 在页面上集成传统和 Amazon S3 端点处理程序。这将要求您使用传统的 JavaScript 语法（实际上更简单）定义 Amazon S3 端点处理程序：

var uploader = new qq.s3.FineUploaderBasic({
    debug: true,
    autoUpload: false,
    request: {
        endpoint: 'rog-zone.s3.amazonaws.com',
        accessKey:'################'
    },
    objectProperties: {
        // Since we want all items to be publicly accessible w/out a server to return a signed URL
        acl: "public-read"
    },
    signature: {
        endpoint: "/assets/plugins/fine-uploader/signature/endpoint.php"
    },
    validation: {
        itemLimit: 5,
        sizeLimit: 15000000
    },
    callbacks: {
        onSubmit: function(id, name) {
            console.log("[on submit] id:" + id + " and name:" + name);
            return new Promise(function(resolve, reject) {
                resolve();
            });
        },
        onComplete: function(id, fileName, responseJSON, xhr){
            console.log("[on complete]:" + id + " and filename:" + fileName);
            var fileEl = this.getItemByFileId(id);              
        },
        onUpload: function(id, name, isError, responseJSON) {
            var obj = JSON.stringify(responseJSON);
            console.log("[on Upload] id:" + id + " and response = " + obj);
        }
    }
});