88. (Http/fetch) [간단 소스] fetch (페치) Web APi 사용해 FormData 폼데이터 멀티 파일 (multiple) body 전송 방법

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : fetch

 

---

[소스 코드]

 

// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------

- 언어 : JavaScript

- 개발 툴 : Edit ++

- 구분 : HTTP / API

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[소스 코드 및 설명]
// --------------------------------------------------------------------------------------

1. 사전 설명) Fetch API 는 JavaScript 에서 접근하고 조작할 수 있는 인터페이스를 제공하는 Web Api 입니다.


2. 소스 코드 : 

    // [FormData 생성 및 file 태그에 있는 파일 지정]
    const formData = new FormData();
    const photos = document.querySelector('input[type="file"][multiple]');

    formData.append("username", "twok2k");

    for (const [i, photo] of Array.from(photos.files).entries()) { // [반복문을 수행하면서 FormData 에 파일 추가]
        formData.append(`photos_${i}`, photo);
    }


    // [Fetch API 요청 수행]
    try {

        const response = await fetch("https://example.com/profile/user", {
            method: "PUT",
            body: formData, // [FormData 추가]
        });

        const result = await response.json(); // [응답 확인]

        console.log("성공 : ", result);

    } catch (error) {
        console.error("실패 : ", error);
    }

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

// --------------------------------------------------------------------------------------

---