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();
        });
    });

如果我使用Postman返回的URL并将正文设置为二进制并附加图像，那么上传工作正常。但是，如果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);
        });

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

2 个答案: