[Task] 이미지 입력 받아 백엔드에 저장하기

		return <div>
			<h1>이미지 업로드</h1>

			<input type="file" onChange={handleChangeImage} />

			<hr />

			<ul>
				{imgURLs.map((imgURL) => (
					<img src={imgURL} key={imgURL} />
				))}
			</ul>
		</div>

 

위와 같이 Input 태그를 활용해 사진파일을 입력받고, imgURLs라는 state로 백엔드에 저장된 사진들을 보여주는 JSX 코드를 짜주었다.

	const handleChangeImage: ComponentProps<"input">["onChange"] = async (
		e
	) => {
		const files = e.target.files;
		if (!files) return;

		console.log("image-files: ", files);

		...
	};

 

위와 같이 onChange 이벤트핸들러로 오는 event 변수에 .target.files로 사용자가 입력한 사진 파일들이 저장되어 있다.

 

이 파일을 formData로 감싸서 fetch post로 백엔드로 전송한다

	const handleChangeImage: ComponentProps<"input">["onChange"] = async (
		e
	) => {
		const files = e.target.files;
		if (!files) return;

		const formData = new FormData();
		formData.append("img", files[0]);

		const response = await fetch("http://localhost:3000/api/images", {
			method: "post",
			body: formData,
		});
		const imgURL = await response.json();
		setImgURLs((prevURLs) => [...prevURLs, imgURL]);
	};

 

백엔드로 전송된 사진 파일을 보기 위해 NextRequest에 formData 메서드로 데이터를 변수로 받아온 후 파일에 저장하는 코드를 작성했다.

export async function POST(req: NextRequest) {
	const formData = await req.formData();
	const file = formData.get("img") as File;

	const rootPath = process.cwd();
	const dirPath = "public/img";
	const fileName = file.name;
	const filePath = path.join(rootPath, dirPath, fileName);
	const arrBuffer = await file.arrayBuffer();
	const data = Buffer.from(arrBuffer);
	await writeFile(filePath, data);

	const imgURL = `http://localhost:3000/img/${fileName}`;

	return NextResponse.json(imgURL);
}

 

dirPath에 설정한 pulbic/img 폴더에 정상적으로 사진이 저장되는 것을 볼 수 있었다.

 

그런데 파일 디렉토리를 찾고, 사진을 저장하는 부분이 다른 코드와 중복되는 부분이 있어 함수로 작성해주었다.

function getPath(path, fileName) {
	const rootPath = process.cwd();
	const fileName = file.name;
	const filePath = path.join(rootPath, path, fileName);
	const arrBuffer = await file.arrayBuffer();
	const data = Buffer.from(arrBuffer);
	await writeFile(filePath, data);
}