[NestJS] 여러 필드를 통해 여러 이미지 업로드하기

cyw320712·2022년 8월 28일
0

NestJs에서 FilesInterceptor를 이용해 파일을 보내면, 하나의 필드만 지정할 수 있고, 지정되지 않은 다른 필드에서 보낸 파일은 인식하지 못합니다. 오히려 그런 필드는 받지 않는다고 오류를 출력하게 됩니다. 이를 해결하기 위해서 사용할 수 있는게 FileFieldsInterceptor입니다.

인터셉터를 사용하는 부분만 따로 템플릿 코드로 표현해보자면 아래와 같습니다.

@UseInterceptors(
	FileFieldsInterceptor(
		[
			{ name: `필드 이름1`, maxCount: `해당 필드에서 넘겨받을 최대 이미지 개수` },
			{ name: `필드 이름2`, maxCount: `해당 필드에서 넘겨받을 최대 이미지 개수` },
			{ name: `필드 이름3`, maxCount: `해당 필드에서 넘겨받을 최대 이미지 개수` },
			...
		],
		`따로 작성해둔 multerOptions`
	),
)
function name(
	@UploadedFiles()
	`변수명`: {
		`필드 이름1`: Express.Multer.File[],
		`필드 이름2`: Express.Multer.File[],
		`필드 이름3`: Express.Multer.File[],
	},
	@Body() ...
): Promise<> {

}

저렇게 지정된 필드에서 온 이미지를 매핑할 수 있습니다. 다만, 해당 필드에서 오는 이미지 파일이 없는 상황이 존재하더라도 일단 필드 이름은 지정을 해줘야하며, undefined 처리는 따로 해줘야 합니다.

Controller에서 데이터을 다루지 않는 것이 룰이지만, 이 부분에서 데이터를 가공하지 않으면 넘기는 파라미터 타입이 너무 더러워지기 때문에 따로 추가적인 가공을 해줬습니다. 꼭 정답이라는 것은 아니지만, 이런 방식으로도 진행할 수 있음을 알려드리고자 코드를 공유합니다.

0개의 댓글