[React] Axios로 폼 데이터 제출 예제 코드/파일 제출

폼 데이터 제출 예제 코드이다. name으로 접근하여 파일을 받아와 제출한다.

 const onSubmit = (e) =>{
    e.preventDefault();
    let formData = new FormData();
    formData.append('uploadFile', document.frm.uploadFile.files[0]);

    // send
    axios.post("http://localhost:3000/fileUpload", formData)
      .then(res=>{
        //처리
      })
      .catch(e=>{
        alert(e);
      })
  }

 

위 코드는 아래의 폼에 frm이라는 name으로 접근하여 uploadFile의 name으로 접근한 후 파일을 받아와 제출한다.

<form name='frm' onSubmit={onSubmit} encType='multipart/form-data'>

          <input type="file" name ='uploadFile' accept='*' />

          <input type="submit" value='파일 전송'/>

        </form>

 

 

아래 형태로 @RequestParam으로 값을 받을 수 있다.

@PostMapping("fileUpload")
	public String fileUpload(@RequestParam("uploadFile")MultipartFile uploadFile,
			HttpServletRequest request) {