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

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : fetch

 

---

[소스 코드]

 

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

- 언어 : JavaScript

- 개발 툴 : Edit ++

- 구분 : HTTP / API

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






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

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


2. 소스 코드 : 

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

    formData.append("username", "twok2k");
    formData.append("image", fileField.files[0]);


    // [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

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

---