如何使用Dropzone.js上传单个图像？ [英] How do you upload a single image with Dropzone.js?

问题描述

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

Dropzone.js seems to be uploading images as multi-part form data. How do I get it to upload images in the same way an image upload would work with cURL or a binary image upload with Postman?

我收到了预签名服务器中S3的URL。预先提供的URL允许上传图片，但不能上传表单字段：

I'm getting a pre-signed URL for S3 from a server. The pre-singed URL allows an image upload, but not form fields:

    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不需要表单字段。

If I use the returned URL with Postman and set the body to binary and attach the image, then the upload works fine. However, if the Dropzone library uses the same URL to upload the image to S3 then I get a 403 because S3 does not expect form fields.

更新：

一个Ajax替代项的工作方式如下，带有S3签名的url，但Dropzone.js似乎不愿意将原始图像数据放入PUT消息正文中。

An Ajax alternative works as below with a S3 signed url, but Dropzone.js does not seem willing to put the raw image data in the PUT message body.

            $.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" );
                    }
                });

推荐答案

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

Add below options, then working.

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

这篇关于如何使用Dropzone.js上传单个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！