Question

我使用fineUploaderS3（）将多个图像上传到S3。我想要做的是选择要上传的文件，调整大小，然后将较小的文件上传到S3而不是原始文件。

我正在努力提交＆＃39;提交＆＃39;被触发：

on（＆＃39; submit＆＃39;，function（event，id，fileName）{

var uploadedFile = jQuery(this).fineUploader('getFile', id);                        
var reader = new FileReader();
reader.onload = function (e) {
    var smallerImageUrl = resizeImage(e.target.result);
var smallerImageBlob = dataURItoBlob(smallerImageUrl);
jQuery('#fine-uploader').fineUploaderS3('addBlobs', smallerImageBlob);
jQuery('#fine-uploader').fineUploaderS3('cancel', id);
};

reader.readAsDataURL(uploadedFile);

}）

但是，这似乎不起作用。对S3的调用中止，或者文件没有写入S3。

请您推荐最好的方法吗？ Fine Uploader中是否有任何原生支持？

调整大小和将dataURL转换为Blob的函数的定义：

function dataURItoBlob（dataURI）{ var byteString = atob（dataURI.split（＆＃39;，＆＃39;）[1]）;

var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}

try {
    return new Blob([ab], {type: mimeString});
} catch (e) {
    var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}

}

function resizeImage（source） {

var canvas = document.createElement("canvas");

var img = document.createElement("img");
img.src = source;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);       
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;                 
if (width > height) {
    if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
   width *= MAX_HEIGHT / height;
   height = MAX_HEIGHT;
    }
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataUrl = canvas.toDataURL();
return dataUrl;

}

更多信息：

这是我代码中的一大部分：

的jQuery（＆＃39;＃细载＆＃39）。fineUploaderS3（{

   uploaderType: 'basic',
   maxConnections: 3,
   button: jQuery('#select'),
   request: {
      endpoint: our endpoint url,
      accessKey: our access key
    },

   objectProperties: {
           acl: 'public-read',
           key: function(id) {
                var regEx = /(?:\.([^.]+))?$/;
                var name = jQuery('#fine-uploader').fineUploaderS3('getName', id);
                var udid = jQuery('#fine-uploader').fineUploaderS3('getUuid', id);
                var extension = regEx.exec(name)[1];
                return location of file on S3;
            }
   },
   signature: {
           endpoint: signature endpoint
   },
   uploadSuccess: {
           endpoint: upload success url,
           params: {
                   type: 'me',
                   width: 170,
                   height: 170
            }
   },
   iframeSupport: {
            localBlankPagePath: blank page url
   },
   retry: {
            showButton: true
   },
   chunking: {
            enabled: true
   },
   resume: {
             enabled: true
   },
   deleteFile: {
             enabled: true,
             method: "POST",
             endpoint: our delete endpoint
   },
   validation: {
             sizeLimit: 15000000
   }

}）。on（＆＃39; submit＆＃39;，function（event，id，fileName）{

             var uploadedFile = jQuery(this).fineUploader('getFile', id);
             var reader = new FileReader();
             reader.onload = function (e) {
             var smallerImageUrl = resizeImage(e.target.result);
             var smallerImageBlob = dataURItoBlob(smallerImageUrl);
             jQuery('#fine-uploader').fineUploaderS3('addBlobs', smallerImageBlob);
             jQuery('#fine-uploader').fineUploaderS3('cancel', id);
 };
 reader.readAsDataURL(uploadedFile);

}）

其他事件的代码，例如＆＃34;已提交＆＃34;，＆＃34;取消＆＃34;，＆＃34;进度＆＃34;，＆＃34;完成＆＃34;如果需要，我可以分享。

有了这个，当我尝试上传一个文件时，我在Firebug中看到了这个：

请求我们的签名端点网址：

{＆＃34;到期＆＃34;：＆＃34; 2013-11-27T14：08：39.751Z＆＃34;＆＃34;条件＆＃34;：[{＆＃34; ACL＆＃34; ：＆＃34;公共读取＆＃34;}，{＆＃34;铲斗＆＃34;：＆＃34; xxxxxx.xxxxxx.com＆＃34;}，{＆＃34;内容类型＆＃34;：＆＃34;图像/ JPEG＆＃34;}，{＆＃34; success_action_status＆＃34;：＆＃34; 200＆＃34;}，{＆＃34;键＆＃34;：＆＃34; XXXXXX / XXXXXX / 20e53c0c -d29e-410C-b2d0-2856861d187e.jpg＆＃34;}，{＆＃34 X-AMZ-元qqfilename＆＃34;：＆＃34; cbr1.jpg＆＃34;}，[＆＃34;内容 - 长度范围＆＃34;＆＃34; 0＆＃34;＆＃34; 15000000＆＃34;]]}

对此的回应：

{＆＃34;策略＆＃34;：＆＃34; eyJleHBpcmF0aW9uIjoiMjAxMy0xMS0yN1QxNDowODozOS43NTFaIiwiY29uZGl0aW9ucyI6W3siYWNsIjoicHVibGljLXJlYWQifSx7ImJ1Y2tldCI6InN5ZG5leS5pbmtpdmUuY29tIn0seyJDb250ZW50LVR5cGUiOiJpbWFnZVwvanBlZyJ9LHsic3VjY2Vzc19hY3Rpb25fc3RhdHVzIjoiMjAwIn0seyJrZXkiOiJzeWRuZXlcL29yaWdpbmFsXC8yMGU1M2MwYy1kMjllLTQxMGMtYjJkMC0yODU2ODYxZDE4N2UuanBnIn0seyJ4LWFtei1tZXRhLXFxZmlsZW5hbWUiOiJjYnIxLmpwZyJ9LFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLCIwIiwiMTUwMDAwMDAiXV19＆＃34;＆＃34;签名＆＃34;：＆＃34; P590iCwLUlTnXo + Ek0e4H / 7Z3k0 =＆＃34;}

请求我们的S3端点（因为中止而没有响应）：

----------------------------- 2084011506152072170779848208 Content-Disposition：form-data;命名=＆＃34;键＆＃34; xxxxxx / xxxxxxx / 20e53c0c-d29e-410c-b2d0-2856861d187e.jpg ----------------------------- 2084011506152072170779848208 Content-Disposition：form -数据;命名=＆＃34; AWSAccessKeyId＆＃34; XXXXXXXXXXXXXXX ----------------------------- 2084011506152072170779848208 Content-Disposition：form-data;名称=＆＃34;内容类型＆＃34; image / jpeg ----------------------------- 2084011506152072170779848208 Content-Disposition：form-data;名称=＆＃34; success_action_status＆＃34; 200 ----------------------------- 2084011506152072170779848208 Content-Disposition：form-data;命名=＆＃34; ACL＆＃34; public-read ----------------------------- 2084011506152072170779848208 Content-Disposition：form-data;名称=＆＃34 X-AMZ-元qqfilename＆＃34; cbr1.jpg ----------------------------- 2084011506152072170779848208 Content-Disposition：form-data;命名=＆＃34;策略＆＃34; eyJleHBpcmF0aW9uIjoiMjAxMy0xMS0yN1QxNDowODozOS43NTFaIiwiY29uZGl0aW9ucyI6W3siYWNsIjoicHVibGljLXJlYWQifSx7ImJ1Y2tldCI6InN5ZG5leS5pbmtpdmUuY29tIn0seyJDb250ZW50LVR5cGUiOiJpbWFnZVwvanBlZyJ9LHsic3VjY2Vzc19hY3Rpb25fc3RhdHVzIjoiMjAwIn0seyJrZXkiOiJzeWRuZXlcL29yaWdpbmFsXC8yMGU1M2MwYy1kMjllLTQxMGMtYjJkMC0yODU2ODYxZDE4N2UuanBnIn0seyJ4LWFtei1tZXRhLXFxZmlsZW5hbWUiOiJjYnIxLmpwZyJ9LFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLCIwIiwiMTUwMDAwMDAiXV19 ----------------------------- 2084011506152072170779848208内容处置：形状数据;名称=＆＃34;签名＆＃34; P590iCwLUlTnXo + Ek0e4H / 7Z3k0 = ----------------------------- 2084011506152072170779848208 Content-Disposition：form-data;命名=＆＃34;文件＆＃34 ;;文件名=＆＃34; cbr1.jpg＆＃34;内容类型：image / jpeg

＆＃34;完成＆＃34;事件没有被触发。所以在这种情况下，没有上传任何内容。较大的原始图像没有上传，因为这一行在＆＃34;提交＆＃34;甚至处理程序 - jQuery（＆＃39;＃fine-uploader＆＃39;）。fineUploaderS3（＆＃39;取消＆＃39;，id），但问题是较小的调整大小的图像没有上传。

如果您需要更多信息，请与我们联系。

使用调试的Firebug和Chrome Javascript控制台日志：在Fine Uploader中为true：

萤火：

[FineUploader 3.9.0-3]收到1个文件或输入。 all.fi .... min.js（第16行）

[FineUploader 3.9.0-3]提交0的S3签名请求 all.fi .... min.js（第16行）

[FineUploader 3.9.0-3]发送0的POST请求 all.fi .... min.js（第16行）

发布我们的签名网址 200 OK 52ms all.fi .... min.js（第17行）

[FineUploader 3.9.0-3]发送0的上传请求 all.fi .... min.js（第16行）

发布我们的S3存储桶中止
all.fi .... min.js（第19行）

[FineUploader 3.9.0-3]取消0 all.fi .... min.js（第16行）

反转片：

它似乎进入了Chrome中的无限循环。我试图只上传一张照片，我看到了：

[FineUploader 3.9.0-3]收到1个文件或输入。 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]提交0签名请求0 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送POST请求为0 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送上传请求0 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]为1提交S3签名请求all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送1个all.fineuploader-3.9.0-3.min.js的POST请求：16

[FineUploader 3.9.0-3]取消0 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]为2提交S3签名请求all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送2个all.fineuploader-3.9.0-3.min.js的POST请求：16

[FineUploader 3.9.0-3]取消1 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送1 all.fineuploader-3.9.0-3.min.js上传请求：16

[FineUploader 3.9.0-3]为3提交S3签名请求all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送3个all.fineuploader-3.9.0-3.min.js的POST请求：16

[FineUploader 3.9.0-3]取消2 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送上传请求2 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]为4提交S3签名请求all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送4个all.fineuploader-3.9.0-3.min.js的POST请求：16

[FineUploader 3.9.0-3]取消3 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送3 all.fineuploader-3.9.0-3.min.js上传请求：16

[FineUploader 3.9.0-3]为5提交S3签名请求all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送5个all.fineuploader-3.9.0-3.min.js的POST请求：16

[FineUploader 3.9.0-3]取消4 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送4 all.fineuploader-3.9.0-3.min.js上传请求：16

[FineUploader 3.9.0-3]为6提交S3签名请求all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送6个all.fineuploader-3.9.0-3.min.js的POST请求：16

[FineUploader 3.9.0-3]取消5 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送5 all.fineuploader-3.9.0-3.min.js上传请求：16

[FineUploader 3.9.0-3]为7提交S3签名请求all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送7个all.fineuploader-3.9.0-3.min.js的POST请求：16

[FineUploader 3.9.0-3]取消6 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送6个all.fineuploader-3.9.0-3.min.js上传请求：16

[FineUploader 3.9.0-3]为8提交S3签名请求all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送8个all.fineuploader-3.9.0-3.min.js的POST请求：16

[FineUploader 3.9.0-3]取消7 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送7 all.fineuploader-3.9.0-3.min.js的上传请求：16 6

未捕获的TypeError：无法设置属性＆＃39;已加载＆＃39;未定义的all.fineuploader-3.9.0-3.min.js：19

[FineUploader 3.9.0-3]为9提交S3签名请求all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送9个all.fineuploader-3.9.0-3.min.js的POST请求：16

[FineUploader 3.9.0-3]取消8 all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送8 all.fineuploader-3.9.0-3.min.js的上传请求：16 6

未捕获的TypeError：无法设置属性＆＃39;已加载＆＃39;未定义的all.fineuploader-3.9.0-3.min.js：19

[FineUploader 3.9.0-3]为10提交S3签名请求all.fineuploader-3.9.0-3.min.js：16

[FineUploader 3.9.0-3]发送10个all.fineuploader-3.9.0-3.min.js的POST请求：16

[FineUploader 3.9.0-3]取消9 all.fineuploader-3.9.0-3.min.js：16 4

注意 - 在我开始尝试调整大小并发送调整大小的文件而不是原始文件之前，Fine Uploader对我来说工作正常。我过去曾用它将几个文件上传到S3。

Answer 1

看起来你的代码总会导致无限循环。在你的onSubmit中，你正在提交文件的缩放版本，并取消原始版本，但是那个缩放文件正在点击onSubmit，你再次开始循环，没有明显的结束。

您有两种选择：

等到Fine Uploader为自动缩放图像上传添加本机支持（可选择与原始图像一起）。这在issue #1061 in the project's Github issue tracker中的功能请求中进行了讨论。
在您的页面上设置两个Fine Uploader实例。一个实例将接收原始文件，生成缩放版本，然后通过第二个实例上的addBlobs方法以编程方式提交。

Fine Uploader S3-在上传之前调整图像大小

1 个答案: