[Nextjs] 파일 업로드(file upload)

클라이언트

const fileUpload = async (file: Blob) => {
    const formData = new FormData();
    formData.append('file', file, file.name); // 파일 이름을 명시

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

        const data = await res.json();
        console.log('서버 응답:', data);
    } catch (error) {
        console.error('파일 업로드 중 오류:', error);
    }
};

export default fileUpload;

 

 

서버(api/upload/route.ts.

import { NextRequest, NextResponse } from 'next/server';
import { writeFile } from 'fs/promises';
import { join } from 'path';

export const config = {
    api: {
        bodyParser: false,
    },
};

export default async function handler(request: NextRequest, response: NextResponse) {
    console.log('업로드 API');

    const data = await request.formData();
    const file: File | null = data.get('file') as unknown as File;

    if (!file) NextResponse.json({ success: false });

    const bytes = await file.arrayBuffer();
    const buffer = Buffer.from(bytes);
    const path = join('/', 'tmp', file.name);

    await writeFile(path, buffer);
    console.log(`${path}}`);

    NextResponse.json('업로드 API');
}