我使用Blueimp/jquery-file-upload插件将文件直接从JS客户端代码上传到亚马逊S3。我使用了分块上传。以下是fileupload的设置:
multipart: true, maxChunkSize: 10 * 1024 * 1024, autoUpload: true,
当我使用这个事件侦听器:'fileuploadchunkdone'记录响应时,我可以看到所有的块也被上传了,但是在存储桶中只保存了最后一个块。此外,当我在上传过程中查看存储桶时,我可以看到文件大小等于区块大小,但在上传后,文件的完整大小等于最后一个区块大小,并且文件已损坏。
我做错什么了吗?还是说这是个bug?
以下是我的S3设置:
CORS:
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>ETag</ExposeHeader>
<AllowedHeader>Content-Type</AllowedHeader>
<AllowedHeader>Content-Range</AllowedHeader>
<AllowedHeader>Content-Disposition</AllowedHeader>
<AllowedHeader>x-amz-acl</AllowedHeader>
<AllowedHeader>x-amz-meta-qqfilename</AllowedHeader>
<AllowedHeader>x-amz-date</AllowedHeader>
<AllowedHeader>authorization</AllowedHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>感谢您的帮助!
更新:
下面是我用来做这个的js代码:
$('.upload-video-part').each(function(){
var that = this;
var videoId;
$(this).fileupload({
sequentialUploads: true,
multipart: true,
disableValidation: true,
maxChunkSize: 10 * 1024 * 1024,
autoUpload: true,
add: function (event, data) {
$(that).find('input[type=file]').hide();
$(that).find('#progress').show();
$.ajax({
url: "/uploaded_videos",
type: 'POST',
dataType: 'json',
data: {doc: {title: data.files[0].name}},
async: false,
success: function(retdata) {
$(that).find('input[name=key]').val(retdata.key);
$(that).find('input[name=policy]').val(retdata.policy);
$(that).find('input[name=signature]').val(retdata.signature);
$(that).parent().append('<div id="video-edit-form-' + retdata.id + '"></div>');
videoId = retdata.id;
data.submit();
$.get({
url: "/edit_after_upload?id=" + videoId,
success: function(data) {
$('#edit_uploaded_video_' + retdata.id).submit(function(e, data){
e.preventDefault();
var messageArea = $('#edit_uploaded_video_' + retdata.id).find('.message-area')[0];
$.ajax({
type: 'PUT',
url: $('#edit_uploaded_video_' + retdata.id).attr('action'),
data: $('#edit_uploaded_video_' + retdata.id).serialize(),
success: function(data) {
$(messageArea).css('color', 'rgba(0, 255, 0, .5');
messageArea.innerHTML = 'Video was successfuly saved!';
$(messageArea).css('display', 'inline-block');
},
error: function(err){
$(messageArea).css('color', 'rgba(255, 0, 0, .5');
messageArea.innerHTML = err.responseJSON.errors;
$(messageArea).css('display', 'inline-block');
}
});
return false;
});
}
});
}
});
},
send: function(e, data) {},
fail: function(e, data) {
$(that).find('.fileinput-button span')[0].innerHTML = 'Video uploading failed';
$(that).find('#progress .bar').css('background', 'red');
},
done: function (event, data) {
$(that).find('.fileinput-button span')[0].innerHTML = 'Video successfully uploaded';
$(that).find('#progress .bar').css('background', 'green');
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$(that).find('#progress .bar').css( 'width', progress + '%');
}
}).on('fileuploadchunksend', function (e, data) {});
});发布于 2021-01-26 23:52:55
在s3中分块上传文件。首先使用s3接口创建分块上传。
https://docs.aws.amazon.com/AmazonS3/latest/API/API_CreateMultipartUpload.html
通过此api,您将收到Upload id。
然后使用此接口上传数据中的分块、提供partNumber和上传id。
https://docs.aws.amazon.com/AmazonS3/latest/API/API_UploadPart.html#API_UploadPart_RequestSyntax
使用该接口接收的etag和partNumber,完成带有API_CompleteMultipartUpload的partUpload
https://docs.aws.amazon.com/AmazonS3/latest/API/API_CompleteMultipartUpload.html
https://stackoverflow.com/questions/48175910
复制相似问题