axios사용하여 파일 업로드 하기

<form>방식을 사용하면, 화면이 전환되거나 새로운 창을 띄어야하는 문제점이 발생한다. 업로드 완료 후 callback 받는 방법도 고려해야하기 때문에 생각해야할게 이만저만이 아니다~

<form method="post" action="uploadForm" enctype="multipary/form-data" target="_blank">
    <input type="file" id="file" name="file">
      <input type="submit">
</form>

<form>내에 type=file이 있을 경우 enctype을 multipary/form-data로 지정해줘야 한다. 지정하지 않을 경우 application/x-www-form-urlencoded가 default로 설정된다.

axios라고 썼는데 이미 jquery ajax를 활용한 예제도 많다.(구글링!) 나중에 검색해서 사용할 수 있도록 예제코드를 작성해놓겠다.

<input type="file" name="file">
<button onclick="upload();" value="업로드">

upload: function(){
      const formData = new FormData();
      const file = document.getElementById("file");
      formData.append("file", file.files[0]);
      axios.post("upload", formData, {
      headers: {
           "Content-Type" : "multipart/form-data" 
      }
    }).then(function(res){
          ... handler
    });
}