[JAVASCRIPT] Fetch API & FormData를 이용한 다중파일 업로드

● 상품 이미지 업로드를 위한 HTML

 <form
   	id="productInfo"
  	name="productInfo"
   	method="post"
  	onsubmit="return false;"
  	enctype="multipart/form-data"
>
	<table id="product-register-table" style="width: 100%; border: 1px solid black">
		<tr>
           	<td class="text-center">상품 이미지</td>
            	<td id="imageForm">
                  <input
                    id="productImage"
                    type="file"
                    onchange="addFile(this);"
                    multiple
          	/>
                  <div class="file-list"></div>
         	</td>
		</tr>
	</table>
    <button type="submit" class="btn btn-primary">등록</button>
</form>

• <form> 태그의 enctype 속성값은 multipart/form-data로 지정합니다.  ※매우 중요※
• <input> 태그의 multiple 속성은 <input> 요소에 사용자가 둘 이상의 값을 입력할 수 있음을 명시합니다.
• 파일을 업로드 하기 위해서는 <input> 태그의 type 속성값은 file로 지정합니다.

 

● 이벤트리스너 이용을 위한 <button> 태그 

<button type="submit" class="btn btn-primary">등록</button>

 

● Fetch API & FormData를 이용하여 서버에 Request 전달

<script>
	var myForm = document.getElementById('productInfo');
    	// <button> 클릭 이벤트
   	myForm.addEventListener('submit', function (e) {
        e.preventDefault();
        
  	var formData = new FormData();
       
        for (let i = 0; i < filesArr.length; i++) {
        	// 삭제 되지 않은 파일일 경우
         	if (!filesArr[i].is_delete) {
            	formData.append('files', filesArr[i]);
          }
        }
        fetch('http://localhost:8080/product', {
        	// post 방식
          	method: 'post',
         	headers: {},
          	body: formData,
        })
       	// response.text() 메소드로 파싱한 text 값 리턴
      	.then(function (response) {
            return response.text();
       	})
      	// 리턴받은 text 값을 받아 원하는 일을 수행
       	.then(function (data) {
            console.log(data);
      	})
      	// error 처리
      	.catch(function (error) {
           	console.log(error);
      	});
  });
</script>

• fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 Option 객체를 받고, Promise 타입의 객체를 리턴합니다. URL은 필수 매개변수 입니다.
• 반환된 객체는, API 호출이 성공했을 경우 response 객체를 resolve하고, 실패했을 경우 error 객체를 reject 합니다.

 

● 다중파일 업로드에 관한 내용은 해당 블로그를 참고하였습니다.

[JavaScript] 첨부파일 다중파일 multiple 업로드