[javascript] Next.js에서의 파일 업로드 처리 방법은 어떤 것이 있나요?

24 Nov 2023

javascript

다음은 Next.js에서 Multer를 사용하여 파일 업로드 처리하는 예시 코드입니다.

먼저, Multer를 설치합니다. 터미널에서 다음 명령어를 실행해주세요:

npm install multer

그리고 Next.js pages 디렉토리에 파일 업로드를 처리할 API 엔드포인트를 생성합니다. 예를 들어, pages/api/upload.js 파일을 생성합니다.

import multer from 'multer';

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

export default upload.single('file')(req, res) => {
  // 파일 업로드 처리 로직을 작성합니다.
  // req.file과 req.body를 사용하여 파일 및 기타 데이터에 접근할 수 있습니다.
};

이제 파일 업로드를 위한 form을 Next.js 페이지에 추가합니다. 예를 들어, pages/index.js 파일에 다음과 같은 코드를 작성합니다.

import React from 'react';

export default function Home() {
  const handleFileUpload = async (e) => {
    const file = e.target.files[0];

    const formData = new FormData();
    formData.append('file', file);

    await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });

    // 파일 업로드 이후의 동작을 수행합니다. 예를 들어, 페이지 새로고침 또는 다음 화면으로 이동 등을 처리할 수 있습니다.
  };

  return (
    <div>
      <input type="file" onChange={handleFileUpload} />
    </div>
  );
}

이제 파일 업로드 관련 로직을 구현했습니다. Multer를 사용하여 파일을 업로드하고 Next.js의 API 엔드포인트에서 해당 파일을 처리할 수 있습니다.