如何使用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);
        });