Nest.js로 input file 전송 시 문제

Question

다음과 같이 name이 다른 file 형태의 input이 여러개 있는 상태인데 여기 넣는 파일들을 배열에 담아 백엔드 (Nest.js)로 전송하여 파일을 여러개 받을 수 있도록 하는게 가능할까요?

kenu · Accepted Answer

가능합니다.클라이언트 측에서는 FormData를 사용하여 파일을 준비하고, 서버 측에서는 Nest.js의 FilesInterceptor를 사용하여 여러 파일을 처리할 수 있습니다.클라이언트 측 코드클라이언트 측에서는 각 파일 입력 요소에 대해 선택된 파일을 캡처하고, 이를 FormData 객체에 추가하여 서버로 전송합니다. 여기서는 각 파일 입력 요소의 name 속성을 배열 형태로 설정하여 여러 파일을 한 번에 처리할 수 있습니다. document.getElementById('uploadButton').addEventListener('click', function() { const formData = new FormData(); const fileInputs = document.querySelectorAll('input[type="file"]'); fileInputs.forEach(input => { Array.from(input.files).forEach(file => { formData.append('files[]', file); }); }); fetch('http://localhost:3000/upload', { method: 'POST', body: formData, }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); }); 서버 측 코드 (Nest.js)서버 측에서는 FilesInterceptor를 사용하여 여러 파일을 처리합니다. 여기서는 FilesInterceptor의 첫 번째 인자로 파일 입력 요소의 name 속성을 전달하고, 두 번째 인자로 최대 파일 수를 지정합니다.import { Controller, Post, UseInterceptors, UploadedFiles } from '@nestjs/common'; import { FilesInterceptor } from '@nestjs/platform-express'; @Controller('upload') export class UploadController { @Post() @UseInterceptors(FilesInterceptor('files[]', 10)) uploadFiles(@UploadedFiles() files) { console.log(files); // 여기서 files는 선택된 모든 파일의 배열입니다. } } 이 설정을 통해 클라이언트에서 선택한 여러 파일을 서버로 전송하고, 서버에서는 이를 처리할 수 있습니다. 클라이언트 측에서는 FormData를 사용하여 파일을 준비하고, 서버 측에서는 FilesInterceptor를 사용하여 여러 파일을 처리합니다2345.from: https://www.phind.com/search?cache=f8nn6k08j2ysv0imysku3vx3

Nest.js로 input file 전송 시 문제

1개의 답변

Q&A 목록