Xhrのレスポンスのステータスが200の代わりに0を示しています

Question

私はタイプファイルのフォームを投稿しています。私はJSONデータを返すことで、そのバネブートコントローラのPOSTリクエストを処理しています。私は、その罰金働い郵便配達で、その要求を確認し、しかし、私は私がコントローラに正しいデータを受信して​​います、しかし、私はPOSTからJSONを取得していない午前= 0

onSubmitForm(){ 
    console.log("entered"); 
    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', '/images', true); 
    //xhr.responseType = 'text'; 

    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 

    var data = new FormData(); 
    var imageFile = document.querySelector('input[type="file"]').files[0]; 
    console.log(imageFile); 

    data.append("imageFile", imageFile); 


    xhr.onreadystatechange = function() { 
     if(xhr.readyState === XMLHttpRequest.DONE){ 
      alert(xhr.status); 
      if(xhr.status === 200){ 
       alert('hi there'); 
       } 
     } 
    } 
    xhr.send(data); 

} 

render() { 
    return (
     <div> 
      <form encType="multipart/form-data" action=""> 
       File to upload: 
        <input type="file" name="imageFile" accept="image/*" /> 
        <input type="submit" value="Upload" onClick={ this.onSubmitForm.bind(this) } /> 
      </form> 
     </div> 
    ) 
} 

XHRのステータスを与えている反応で方法をonreadystatechangeに使用していたときにリクエスト??

コントローラ

@PostMapping("/images") 
public @ResponseBody JSONModel addContent(@RequestParam("imageFile") MultipartFile file, 
     imageApp content) { 

    String encodedfile = null ; 
    double fileSize = file.getSize(); 

    try { 
      byte[] bytes=file.getBytes(); 
      System.out.println(fileSize/(1024*1024)); 
      encodedfile = Base64.getMimeEncoder().encodeToString(bytes); 
    } catch (FileNotFoundException e) { 
     // TODO Auto-generated catch block 
     e.printStackTrace(); 
    } catch (IOException e) { 
     // TODO Auto-generated catch block 
     e.printStackTrace(); 
    } 

    content.setDate(LocalDateTime.now()); 

    content.setLocation(UUID.randomUUID().toString()); 
    content.setId(UUID.randomUUID().toString()); 
    content.setContent(encodedfile); 
    return service.addContent(content); 
    } 

サービス

public @ResponseBody JSONModel addContent(imageApp content) { 
    return new JSONModel(1, respository.save(content).getLocation()); 
} 

Answer 1

<input type="submit" to type="button"を行い、タイプ=を維持することは、 "提出" ページ/フォームを提出し、それがどの矛盾する行動を起こす必要があるブラウザに指示私たちは予防する必要があります。したがって、タイプ=「ボタン」を変更するか、ハンドラーと呼び出しでイベントを受け取ってデフォルトの動作を防ぐことができますe.preventDefault();