上传缩略图

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 初始化程序中输入多个调整大小选项。我能做些什么，以便不仅将原始文件，而且将其调整大小的版本发送到 S3？是否也可以直接在亚马逊上调整文件大小？

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

提前谢谢你。

Answer 1

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

警告#1：您应该在全尺寸图像之后上传缩略图，否则全尺寸图像可能会出现一些缓冲区问题并被截断。

警告#2：这只有在FileUploaded 的bind 调用发生在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();
    }
}

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. 你使信号量变量“完成”最初为假。 2.如果不完整 -> 更改设置以生成缩略图并重新启动 plupload。将完成设置为真。 3. 如果完成 -> 清空文件队列并重置设置。

丑陋但能胜任。我仍在寻找...更漂亮的解决方案。