如何使用 Dropzone.js 上传单个图像？

Question

Dropzone.js 似乎将图像作为多部分表单数据上传。如何让它以与 cURL 上传图片或 Postman 二进制图片上传相同的方式上传图片？

我正在从服务器获取 S3 的预签名 URL。预先设定的 URL 允许上传图片，但不允许上传表单字段：

    var myDropzone = new Dropzone("#photo-dropzone");
    myDropzone.options.autoProcessQueue = false;
    myDropzone.options.autoDiscover = false;
    myDropzone.options.method = "PUT";

    myDropzone.on("addedfile", function ( file) {
        console.log("Photo dropped: " + file.name );
        console.log("Do presign URL: " + doPresignUrl);
        $.post( doPresignUrl, { photoName: file.name, description: "Image of something"  })
            .done(function( data ) {
                myDropzone.options.url = data.url
                console.log(data.url);
                myDropzone.processQueue();
        });
    });

如果我将返回的 URL 与 Postman 一起使用并将正文设置为二进制并附加图像，则上传工作正常。但是，如果 Dropzone 库使用相同的 URL 将图像上传到 S3，那么我会得到 403，因为 S3 不需要表单字段。

更新：

Ajax 替代方案使用 S3 签名的 url 如下所示，但 Dropzone.js 似乎不愿意将原始图像数据放入 PUT 消息正文中。

            $.ajax( {
                    url: data.url,
                    type: 'PUT',
                    data: file,
                    processData: false,
                    contentType: false,
                    headers: {'Content-Type': 'multipart/form-data'},
                    success: function(){
                        console.log( "File was uploaded" );
                    }
                });

Answer 1

添加以下选项，然后工作。

myDropzone.options.sending = function(file, xhr) {
  var _send = xhr.send;
  xhr.send = function() {
    _send.call(xhr, file);
  }
}

Answer 2

将 maxFiles 设置为 1。

  Dropzone.autoDiscover = false;
        dzAllocationFiles = new Dropzone("div#file-container", {
            url: "api.php?do=uploadFiles"
            , autoDiscover: false
                , maxFiles: 1
                , autoQueue: true
            , addRemoveLinks: true
            , acceptedFiles: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        });

        dzAllocationFiles.on("success", function (file, response) {
    // Success Operations
        });

        dzAllocationFiles.on("maxfilesexceeded", function (file, response) {
            allocationFileNames = [];
            this.removeAllFiles();
            this.addFile(file);
        });