Question

我正在开发一个项目，并且必须将文件上传到s3。这是我的代码：

config = $.extend(Photo.Plupload.config, config);
var uploader = new plupload.Uploader({
            runtimes:'flash,silverlight',
            browse_button:config.select_button,
            max_file_size:config.max_file_size,
            url:'http://' + Photo.Album.Form.bucket + '.s3.amazonaws.com/',
            flash_swf_url:'/assets/plupload/js/plupload.flash.swf',
            silverlight_xap_url:'/assets/plupload/js/plupload.silverlight.xap',
            init:{
                FilesAdded:function (up, files) {
                    /*plupload.each(files, function (file) {
                     if (up.files.length > 1) {
                     up.removeFile(file);
                     }
                     });
                     if (up.files.length >= 1) {
                     $('#' + config.select_button).fadeOut('slow');
                     }*/
                },
                FilesRemoved:function (up, files) {
                    /*if (up.files.length < 1) {
                     $('#' + config.select_button).fadeIn('slow');
                     }*/
                }
            },
            multi_selection:true,
            multipart:true,
            multipart_params:{
                'key':config.key + '/${filename}',
                'Filename':'${filename}', // adding this to keep consistency across the runtimes
                'acl':config.acl,
                'Content-Type':config.content_type,
                'success_action_status':'201',
                'AWSAccessKeyId':Photo.Album.Form.access_key_id,
                'policy':Photo.Album.Form.policy,
                'signature':Photo.Album.Form.signature
            },
            filters:[
                {
                    title:config.filter_title,
                    extensions:config.filter_extentions
                }
            ],
            file_data_name:'file'
        });

        // instantiates the uploader
        uploader.init();

        // shows the progress bar and kicks off uploading
        uploader.bind('FilesAdded', function (up, files) {
            // add pseudofile to the sheet
            console.log(files);
            $.each(files, function (index, value) {
                value.name = "thumb_" + value.name;
            });
            console.log(files);
            console.log(up);
            uploader.start();
        });

        // binds progress to progress bar
        uploader.bind('UploadProgress', function (up, file) {
            /*if (file.percent < 100) {
             $('#progress_bar .ui-progress').css('width', file.percent + '%');
             }
             else {
             $('#progress_bar .ui-progress').css('width', '100%');
             $('span.ui-label').text('Complete');
             }*/
        });

        // shows error object in the browser console (for now)
        uploader.bind('Error', function (up, error) {
            // unfortunately PLUpload gives some extremely vague
            // Flash error messages so you have to use WireShark
            // for debugging them (read the README)

            alert('Что-то непонятное произошло. Firebug в помощь.');
            console.log('Expand the error object below to see the error. Use WireShark to debug.');

            console.log(error);
        });

        // when file gets uploaded
        uploader.bind('FileUploaded', function (up, file) {
            //console.log(up);
            //console.log(file);
            // save file location in the database
            Photo.Album.Form.post(file)
            up.refresh();
        });

代码有效。我将文件上传到S3并获得我发送给服务器处理的有效响应。调整图像客户端的大小也有效。

我现在要做的是将缩略图与原始文件一起发送到服务器。据我所知，在plupload初始化程序中输入多个resize-options是不可能的。我该怎么做，以便不仅原始文件，而且其调整大小的版本被发送到S3？是否也可以直接在亚马逊上调整文件大小？

我正在尝试避免下载文件并让我的服务器调整大小并以不同的分辨率再次上传它的选项。

提前谢谢。

Answer 1

更好的解决方案是在QueueChanged处理程序中触发FileUploaded，然后调用refresh。这将为同一文件再次启动上传，您可以设置在BeforeUpload处理程序中读取的属性来调整文件大小。

警告＃1：您应该在完整尺寸的图片之后上传缩略图，否则全尺寸图片可能会出现一些缓冲问题并被切断。

警告＃2 ：仅当bind FileUploaded uploader.init()之后FileUploaded file.status DONE uploader.bind('BeforeUpload', function(up, file) { if('thumb' in file) up.settings.resize = {width : 150, height : 150, quality : 100}; else up.settings.resize = {width : 1600, height : 1600, quality : 100}; } uploader.bind('FileUploaded', function(up, file) { if(!('thumb' in file)) { file.thumb = true; file.loaded = 0; file.percent = 0; file.status = plupload.QUEUED; up.trigger("QueueChanged"); up.refresh(); } } {{1}} {{1}} {{1}}之后发生{{1}}在你的处理程序之后会将{{1}}覆盖回{{1}}。

{{1}}

Answer 2

万一有人感兴趣，我找到了一个（可能是暂时的）解决这个问题的方法。

        uploader.bind('UploadComplete', function (up, files) {
        console.log(uploader);
            // renew the file object
            if (config.complete == true) {
                // remove all files
                files = [];
                up.settings.multipart_params.key = config.key + '/${filename}';
                up.settings.resize = null;
            } else {
                up.settings.multipart_params.key = config.key + '/thumbs/${filename}';
                up.settings.resize = {width:100, height:100};
                $.each(files, function(index, value){
                    value.percent = 0;
                    value.status = 1;
                });
                config.complete = true;
                up.start();
            }
        });

所以， 1.最初将信号量变量“完成”设为false。 2.如果不完整 - >更改设置以生成缩略图并重新启动plupload。将完成设置为true。 3.如果完成 - >清空文件队列并重置设置。

丑陋，但做的工作。我还在寻找一个更漂亮的解决方案。

Plupload Thumbnail

2 个答案: