리액트 노드 multer를 활용한 파일 업로드

화면구성(파일선택) ------------------> 서버(파일을 폴더에 저장)
서버저장 경로수신 <------------------- 파일저장 주소를 전송
새로운 제품 추가 ------------> 전달된 폼 수신 <-------> DB

  return (
    <div>
      <Form.Control
        type='file'
        className='shadow-none'
        accept='image/*'
        onChange={(e) => { FileUpload(e) }}> 
        {/* Form 컨트롤러 사용시 자동으로 "multipart/form-data" 형식을 넘김 */}

      </Form.Control>
    </div>
  )
}

onChange 함수를 사용해 파일이 업로드 되면 FileUpload함수 실행

  const formData = new FormData();

  const FileUpload = (e) => {
    // console.log(e.target.files);

    formData.append("file", e.target.files[0])
    for (const key of formData) console.log(`key---->>> ${key}`);
    
    axios.post('http://127.0.0.1:8000/upload', formData)
      .then((result) => {
        console.log('이미지 업로드 성공');
        // getImage(result.data);
      });
  }

FormData를 먼저 생성후 onChange되면 e.target.files을 formData에 append한후

axios를 통해 서버로 전송후

서버에서 multer 라이브러리 설치후 import

npm install multer

import multer from 'multer';

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'upload/')
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
    // cb(null, file.fieldname + '-' + uniqueSuffix)
    cb(null, uniqueSuffix + '-' + file.originalname)
  }
})

const fUpload = multer({ storage: storage }).single('file')

multer.diskStorage: multer에서 제공하는 디스크 스토리지 엔진을 설정하는 부분입니다. 이 부분에서 파일이 저장될 디렉토리와 파일명 등을 설정할 수 있습니다.

destination: 업로드된 파일이 저장될 디렉토리를 지정합니다.
filename: 업로드된 파일의 저장할 파일명을 설정하는 함수입니다.
fUpload 함수: 실제 파일 업로드를 처리하는 함수입니다.
multer({ storage: storage }).single('file')은 Express 애플리케이션에 추가되는 미들웨어로서, 클라이언트가 전송한 파일을 받아서 지정된 디렉토리에 저장하고, 저장된 파일의 정보를 req.file에 저장하는 역할

export function upload(req, res) {
  fUpload(req, res, err => {
    if(err){
      console.log(err);
    }else{
      res.json(res.req.file.path)
      // console.log(JSON.stringify(res.req.file.path));
    }
    
  })
}

파일 저장이 완료되면 파일 패스 리액트로 전송

server.use('/upload',express.static(path.join('upload')))

server.use('/upload', ...): /upload 경로로 들어오는 모든 요청에 대해 이 정적 파일 미들웨어를 사용하도록 Express 애플리케이션에 등록합니다. 즉, 클라이언트가 '/upload' 경로로 요청을 보낼 때, 서버는 이 경로를 기준으로 정적 파일을 찾아 응답으로 전송합니다.
path.join('upload')는 현재 디렉토리 기준으로 'upload' 폴더를 나타냅니다.

http://127.0.0.1:8000/%{이미지 패스 네임}

입력해서 이미지가 나옴

이미지가 여러개일시 !

const upload = multer({ storage: storage }).array('images');

multer({ storage: storage })에 single대신 array

const upload = multer({ storage: storage }).array('images');

export async function newProduct(req, res) {
  let imgUrl = [];
  await upload(req, res,err => {
    if (err) {
      console.log(err);
    } else {
      imgUrl = req.files.map(file =>  file.path);
    }
    
  });
}

작성시 모든 이미지는 파이렝 들어가고 이미지 path들 배열로 imgUrl에 저장