Image upload Process 과정
실제 이미지는 Storage에 저장하고, 주소를 활용해 처리합니다.
-
Back-end에 파일을 업로드하는 API를 만듭니다.
-
브라우저에 파일 태그인
<input type="file"/>를 만듭니다. -
2의 태그를 통해 파일을 선택하면 파일 객체가 들어오고, 그 객체를 state나 변수에 저장할 수 있습니다.
-
파일을 uploadFile API에 보내면 Back-end에서 Storage로 파일을 전송합니다.
-
Storage에서는 파일을 저장해주고 그 파일을 다운 받을 수 있는 주소를 줍니다.
-
Back-end에서 그 주소를 받아서 다시 프론트에 돌려주고, 전달받은 주소를 img태그 등에 사용하면 실제로 브라우저에서 해당 이미지를 볼 수 있게 됩니다.
-
API에 image 주소와 이미지에 대한 각종 정보를 넘기고, DB에 이미지 주소를 등록하고, 클라이언트 요청시 image 주소를 받아와서 화면에 보여줍니다.
image를 DB에 직접 넣지 않는 이유
DB는 각각의 타입이 있습니다. 이미지 주소가 문자열로 들어가면 text, 실제 이미지가 들어가면 blob타입이 됩니다.
blob
bynary large object 0과 1로 구성된 이진 데이터 사진을 0과 1로 변환해서 집어 넣습니다.
사진은 픽셀 단위로 이루어져있습니다.
각 픽셀은 rgb 색상을 가지고 있으며, 각 색상 값을 숫자로 표현합니다. 하지만 사이즈가 크기 대문에 해당 이미지를 storage에 저장하고, 다운로드 할 수 있는 주소만 받아서 사용하는 방식을 사용합니다.
Nestjs에서 이미지 파일 업로드하기
-
파일 업로드를 처리하기 위해서 Nest.js는 Multer미들 웨어를 사용합니다. 이 미들웨어는 완전히 구성 가능하며 애플리케이션 요구 사항에 다라 작동을 조정 할 수 있습니다.
-
Multer는 주로 파일 업로드에 사용되는 (multipart/form-data)가 아닌 폼을 처리하지 않습니다. 그리고 이 패키지는 FastifyAdapter와 함께 작동하지 않습니다.
Basic example
- 단일 파일을 업로드하고 싶을 때는 단순히 Fileinterceptor()를 핸들러에 연결한 다음 @uploadedFie() 데코레이터를 사용하여 요청해서 파일을 가져옵니다.
Multiple files
-
여러 필드를 업로드하기 위해 FileFieldslnterceptor() 데코레이터를 사용합니다.
-
파일 배열 업로드에서는 Fileslnterceptor()를 사용하고 이 인터셉터는 세가지 인자를 위합ㄴ니다. fieldName,MaxCount는 동시에 업로드할 수 있는 최대 파일 수이며 선택적인 MulterOptions 객체입니다. 또한, request 객체에서 파일을 선택하기 위해 @uploadFiles()데코레이터를 사용합니다.
참조 사이트
