amazon-s3 - Plupload 缩略图

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

更好的解决方案是触发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();
    }
}