2016-06-29 10 views
-1

Dropzone.jsは複数の部分からなるフォームデータとして画像をアップロードしているようです。画像アップロードがcURLやPostmanでアップロードされたバイナリ画像と同じように画像をアップロードするにはどうすればよいですか?Dropzone.jsで1つの画像をアップロードするにはどうすればよいですか?

サーバーからS3の事前署名済みURLが取得されています。事前に調印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(); 
     }); 
    }); 

、その後、アップロードが正常に動作します。しかし、Dropzoneライブラリが同じURLを使用してS3に画像をアップロードすると、S3はフォームフィールドを期待しないので、私は403を取得します。

更新:

Ajaxの代替は、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); 
     }); 

答えて

1

セットMAXFILESは、その後の作業、オプションの下に追加します。

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

ありがとうございます。しかし、残念ながら、画像はメッセージ本文に直接送信されません – Jack

1

  $.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"); 
        } 
       }); 
関連する問題