WebKitFormBoundary 包含在直接上传到 s3 的文件有效负载中答案

【问题标题】：WebKitFormBoundary included in file payload on direct upload to s3WebKitFormBoundary 包含在直接上传到 s3 的文件有效负载中
【发布时间】：2016-12-11 10:29:04
【问题描述】：

我有一个 dropzone.js 实例，它使用 CORS 将文件直接上传到 S3 存储桶，然后将 javascript 中的文件信息传递给我以供使用。 This is the tutorial I followed for it...

文件上传本身似乎工作正常，文件显示在正确文件路径的 s3 存储桶中，但是所有文件都包含类似这样的内容

------WebKitFormBoundaryMH4lrj8VmFKgt1Ar
Content-Disposition: form-data; name="files[0]"; filename="image-name.png"
Content-Type: image/png


IMAGE CONTENT HERE

------WebKitFormBoundaryMH4lrj8VmFKgt1Ar--

我终其一生都无法弄清楚为什么会发生这种情况。我上传的文件类型/mime 无关紧要，一切都包括它。

任何帮助将不胜感激！

【问题讨论】：

你的请求方式是PUT，但是你请求的body是multipart/form-data。让正文成为文件。
知道怎么做吗？我不相信我会更改 dropzone.js 配置中的任何重要内容。只是不确定如何强制它使用文件作为正文而不包含额外的文本......

标签： javascript amazon-s3 upload dropzone.js

【解决方案1】：

@TadasTamosauskas 是正确的，捕获 'sending' 事件来修补 xhr 对分块上传不起作用。

下面是另一种使用作为选项传递给 Dropzone 的 params 函数修补 xhr 的方法。分块执行路径还添加了使用 OneDrive API 上传可恢复文件所需的标头，如下所述：https://docs.microsoft.com/en-us/onedrive/developer/rest-api/api/driveitem_createuploadsession?view=odsp-graph-online

const CHUNK_SIZE=10485760 //10MiB

Dropzone.options.dropzone = {
    method: "put",
    headers: {
        'Cache-Control': null,
        'X-Requested-With': null
    },
    filesizeBase: 1024,
    maxFilesize: 102400, // 100G in MB, max onedrive filesize
    chunking: true,
    chunkSize: CHUNK_SIZE,
    params: function(files, xhr, chunk) {
        if (chunk) {
            const chunk_start = (chunk.index * CHUNK_SIZE)
            xhr.setRequestHeader('Content-Range', 
                'bytes ' + chunk_start
                + '-' + (chunk_start + chunk.dataBlock.data.size - 1) 
                + '/' + files[0].size)
            var _send = xhr.send
            xhr.send = function() {
                _send.call(xhr, chunk.dataBlock.data)
            }
        } else {
            var _send = xhr.send
            xhr.send = function() {
                _send.call(xhr, files[0])
            }
        }
    }
}

【讨论】：

【解决方案2】：

在你的 init 中：function() { .. }

添加以下内容：

      self.on("sending", function(file, xhr, formData) {
        var _send = xhr.send;
        xhr.send = function() {
          _send.call(xhr, file);
        }
      });

【讨论】：

谢谢！花了几个小时试图弄清楚这一点。
这确实解决了这个问题，但不幸的是对于分块上传无法正常工作
@TadasTamosauskas 你的意思是一个大文件被分块或同时上传多个？
@DanielH 如果您添加此 monkeypatch 并启用分块上传，monkeypatched 方法将为每个块调用，它会为每个块上传整个文件。所以如果你有 chunkSize = 5MB 和一个 20MB 的文件，它将上传 4 个块，每个块 20MB :)
@TadasTamosauskas 啊好的，很高兴知道，不知道如何处理=D