Question

我使用Blueimp/jquery-file-upload插件直接从JS客户端代码将文件上传到AWS S3。我用过multipart上传。这是fileupload的设置：

multipart: true, maxChunkSize: 10 * 1024 * 1024, autoUpload: true,

当我使用此事件侦听器记录响应时：'fileuploadchunkdone'我可以看到所有块都已上传，但在存储桶中只保存了最后一个块。另外，当我在上传过程中看到我的存储桶时，我可以看到文件大小相等的块大小，但是在上传完整文件大小等于最后一个块大小后，文件已损坏。

我做错了什么吗？或者这是一些错误？

这是我的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) {});
});

Answer 1

在 s3 中以多个块上传文件。首先使用s3 api创建Multi Part Upload。

https://docs.aws.amazon.com/AmazonS3/latest/API/API_CreateMultipartUpload.html

您将从此 API 收到上传 ID。

然后使用这个api上传parts，在数据中提供partNumber和upload id。

https://docs.aws.amazon.com/AmazonS3/latest/API/API_UploadPart.html#API_UploadPart_RequestSyntax

使用etag和partNumber从这个api接收，通过API_CompleteMultipartUpload完成partUpload

https://docs.aws.amazon.com/AmazonS3/latest/API/API_CompleteMultipartUpload.html

块直接上传到s3 jquery-file-upload，只保存最后一个块

1 个答案: