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--

我不能为我的生活弄清楚为什么会这样。我上传的文件类型/ mime无关紧要，一切都包含它。

非常感谢任何帮助！

Answer 1

在你的init：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 的 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])
            }
        }
    }
}

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

2 个答案: