95. (Http/axios) 액시오스 사용해 Http 요청 시 input file FormData 멀티파트 파일 전송 방법

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : Axios

 

---

[소스 코드]

 

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

- 언어 : JavaScript

- 개발 툴 : Edit ++

- 구분 : HTTP / API

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






// --------------------------------------------------------------------------------------
[소스 코드]
// --------------------------------------------------------------------------------------

    <!-- ================================================== -->
    <!-- [CDN 주소 설정] -->
    <!-- ================================================== -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- ================================================== -->






    <!-- ================================================== -->
    <!-- [자바스크립트 코드 지정] -->
    <!-- ================================================== -->

    // [버튼 클릭 이벤트 정의]
    document.getElementById("uploadButton").addEventListener("click", async () => {
    
        // [input file 태그 지정]
        const fileInput = document.getElementById("fileInput");
        const file = fileInput.files[0]; // [사용자가 선택한 파일]


        // [파일 포함 여부 체크]
        if (!file) {
            alert("선택 된 파일이 없습니다. 파일을 선택하세요!");
            return;
        }


        // [FormData 객체 생성 및 파일 추가]
        const formData = new FormData();
        formData.append("file", file);

        try {

            // [Axios로 파일 전송 수행]
            const response = await axios.post("https://example.com/upload", formData, {
                headers: {
                    "Content-Type": "multipart/form-data", // [헤더 값 추가]
                },
            });

            console.log("파일 업로드 성공 : ", response.data);

        } catch (error) {
            console.error("파일 업로드 실패 : ", error);
        }
    });
    
// --------------------------------------------------------------------------------------






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

https://axios-http.com/kr/docs/intro

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

---