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

Question

我有一个 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--

我一辈子都弄不明白为什么会这样。不管我上传什么type/mime文件，都包含它。

如有任何帮助，我们将不胜感激！

Answer 1

在你的初始化中：function() { .. }

添加以下内容：

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

Answer 2

@TadasTamosauskas 是正确的，捕捉 'sending' 事件来修补 xhr 不适用于分块上传。

下面是另一种方法，它使用作为选项传递给 Dropzone 的参数函数来修补 xhr。分块执行路径还添加了使用 OneDrive API 进行可恢复文件上传所需的 headers，如此处记录：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])
            }
        }
    }
}

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

WebKitFormBoundary included in file payload on direct upload to s3

javascript

upload

amazon-s3

dropzone.js