FormData/Javaを使用したファイルでajaxフォームを送信する方法

Question

私はサーバーに投稿を送信しようとしていますが、いつもエラーが発生しています何も何も試していません。

JS：

var form = $('form')[0]; 
var formData = new FormData(form); 
    $.ajax({ 
     method: "POST", 
     url: "./signup", 
     data: formData, 
     enctype: 'multipart/form-data', 
     cache: false, 
     contentType: false, 
     processData: false, 
     success : function(data) { 
      //... 
     }, 
     error : function(qXHR, textStatus, errorThrown){ 
      console.log(errorThrown, "Error " + qXHR.status); 
     } 
    }); 

HTML：

<form id="signup-form" action="#"> 
    <div class="form-group"> 
    <label>First Name</label> 
    <input name="firstName" type="text" id="firstName"> 
    </div> 
    <div class="form-group"> 
    <label>Surname</label> 
    <input name="surname" type="text" id="surname"> 
    </div> 
    <div class="form-group"> 
    <label>File</label> 
    <input type="file" name="attachFile" id="attachFile"> 
    </div> 
</div> 
<input type="submit" id="btn-submit-signup value="Submit"> 
</form> 

javaの

//controller header 
@RequestMapping(value = "/signup", headers = "content-type=multipart/*", method = RequestMethod.POST) 
    public @ResponseBody Response<String> signup(@RequestBody UserSignup details) 



//UserSignup 
public class UserSignup { 
    private String firstName; 
    private String surname; 
    private MultipartFile attachFile; 

    public UserSignup(){} 

    //getters and setters... 
} 

何が間違っている任意のアイデア？

Answer 1

春が正しくファイルのアップロードを処理する方法についてのガイドを持っている：https://spring.io/guides/gs/uploading-files/ガイドから撮影

、ここでは簡単な例である

コントローラ

@Controller 
public class FileUploadController { 

    @PostMapping("/signup") 
    public String handleFileUpload(@RequestParam("file") MultipartFile file, 
      RedirectAttributes redirectAttributes) { 
     storageService.store(file); 
     redirectAttributes.addFlashAttribute("message", 
      "You successfully uploaded " + file.getOriginalFilename() + "!"); 

     return "redirect:/"; 
    } 
} 

フォーム

<form id="signup-form" method="POST" enctype="multipart/form-data" action="/"> 
    <table> 
     <tr><td>File to upload:</td><td><input type="file" name="file" /></td></tr> 
     <tr><td></td><td><input type="submit" value="Upload" /></td></tr> 
    </table> 
</form> 

Ajax

$.post("./signup", $("#signup-form").serialize());