자바스크립트 fetch API를 사용하여 파일 업로드하기

10 Sep 2023

javascript

파일 업로드는 웹 개발에서 중요한 기능 중 하나입니다. 과거에는 파일을 업로드하기 위해 많은 브라우저 종속적인 방법들을 사용해야 했지만, 자바스크립트 fetch API를 사용하면 간편하고 일관된 방법으로 파일을 업로드할 수 있습니다.

fetch API란?

fetch API는 비동기 네트워킹을 위한 자바스크립트 API입니다. 이 API는 네트워크 요청을 만들고 응답을 처리하는 간편한 방법을 제공합니다. 파일 업로드를 위해 fetch API의 POST 메소드를 사용할 수 있습니다.

파일 업로드 예제

다음은 fetch API를 사용하여 파일을 업로드하는 간단한 자바스크립트 예제입니다.

const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');

uploadButton.addEventListener('click', () => {
  const file = fileInput.files[0];
  
  const formData = new FormData();
  formData.append('file', file);
  
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('파일이 업로드되었습니다.');
    console.log(data);
  })
  .catch(error => {
    console.error('파일 업로드 중 에러가 발생했습니다.');
    console.error(error);
  });
});

이 예제에서는 HTML에서 fileInput과 uploadButton을 찾아와 이벤트 리스너를 추가합니다. 사용자가 파일을 선택하고 uploadButton을 클릭하면, 선택한 파일을 FormData에 추가하고 POST 메소드를 사용하여 서버에 업로드합니다.

서버 측 처리

서버 측에서는 업로드된 파일을 수신하여 적절한 처리를 해야 합니다. 서버 측 언어나 프레임워크에 따라 처리 방법이 다를 수 있습니다.

예를 들어, Node.js의 Express 프레임워크를 사용하여 파일을 업로드하려면 다음과 같은 방법을 사용할 수 있습니다.

const express = require('express');
const multer  = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  // 파일을 업로드한 후에 수행할 작업을 여기에 작성합니다.
  res.send('파일이 업로드되었습니다.');
});

app.listen(3000, () => {
  console.log('서버가 시작되었습니다.');
});

이 예제에서는 multer 미들웨어를 사용하여 파일을 멀티파트(form-data) 형식으로 업로드합니다. 업로드된 파일은 uploads/ 디렉토리에 저장됩니다. 파일 업로드 후에는 적절한 처리를 한 후에 클라이언트에 응답을 보냅니다.

결론

자바스크립트의 fetch API를 사용하여 파일을 업로드하는 방법을 알아보았습니다. 이를 통해 웹 개발자는 간편하고 일관된 방법으로 파일을 업로드할 수 있습니다. 서버 측에서는 파일을 적절히 처리하는 로직을 구현해야 합니다.