자바스크립트 Fetch 파일 업로드

Spring 업로드에 이어 클라이언트부분도 만들어보자.
심플하게 필요한 소스만 넣었다.

소스

함수 만들기

사용하기 편하게 함수로 만들어 사용하자.

// Fetch 파일 업로드 함수
const fileUpload = async(url, files) => {
    const formData = new FormData();
    for(let i = 0; i < files.length; i++) {
        formData.append("file", files[i]);
    }
    
    const method = 'post';
    const body = formData;
    const headers = {};
    const res = await fetch(url, { method, body, headers })
    if(res.status === 200) return await res.json();
    //
    // 예외처리 부분
    //
    return false;
}

함수 호출

위에서 만들어진 함수를 실행하는 방법이다.

<!-- html input 태그 -->
<input id="file" type="file"></input>

// 업로드 실행
const files = document.getElementById('file').files;
const res = await fileFetch('/file', files);
// res === false  실패!

예제

다른 예제

스프링 서버단 업로드
스프링 서버단 다운로드
클라이언트 자바스크립트 Fetch 업로드
클라이언트 자바스크립트 Fetch 다운로드