reactjsとajaxを使用して画像をアップロード

Question

フォームを使用してURL/apiに画像をアップロードしようとしています。 フォームの送信時にhandleImgUpload（）メソッドを呼び出します。 問題は、送信された要求が空であることです。 私は、新しいFormData（これ）が反応や何かで動作しないと思います。

画像パスを設定する別の機能があります。ここ

handleImgUpload(e){ 
     e.preventDefault(); 
     $.ajax({ 
     url: "my url goes here", // Url to which the request is send 
     type: "POST",    // Type of request to be send, called as method 
     data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values) 
     contentType: false,  // The content type used when sending data to the server. 
     cache: false,    // To unable request pages to be cached 
     processData:false,  // To send DOMDocument or non processed data file it is set to false 
     success: function(data){ // A function to be called if request succeeds 
      console.log(new FormData(this)); 
     } 
     }); 
} 

は形式です：

<form id="uploadimage" onSubmit={this.handleImgUpload} action="" method="post" encType="multipart/form-data"> 
    <Row id="image_preview" className="row"> 
     <img id="previewing" src={this.state.imgPath}/> 
    </Row> 
    <div id="selectImage"> 
     <label>Select Your Image</label><br/> 
     <input type="file" name="image" id="file" onChange={this.handleImgChange} required /> 
     <Button type="submit" className="btn btn-primary" id="upload">Upload</Button> 
    </div> 
</form> 

Answer 1

thisが反応構成要素ではなく、[jQueryのAjaxをevent.target

handleImgUpload(e) { 
    e.preventDefault() 
    let formData = new FormData(e.target) 

    for (let [key, val] of d.entries()) { 
    console.log(key, val) <-- should log the correct form data 
    } 

    // ajax stuff 
}