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을 사용하여 바이너리에 몸을 설정하고 이미지를 첨부하면, 업로드가 잘 작동합니다. 그러나 Dropzone 라이브러리가 S3에 이미지를 업로드하는 데 동일한 URL을 사용하면 S3에 양식 필드가 필요하지 않으므로 403이 표시됩니다.

는 업데이트

:

아약스 대안은 S3와 함께 아래와 같이 작동이 URL을 서명했으나 Dropzone.js는 PUT 메시지 본문에 원시 이미지 데이터를 집어 넣 으려하지 않는 것 같습니다. 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); 
     }); 

Answer 1

설정 MAXFILES는 작업 옵션 아래에 추가합니다.

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

Answer 2

에

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