React | Node.js연동 파일 업로드 (+ multer)

 

이전글 Node.js | multer를 이용한 파일 업로드 (input type='file')을 읽고오세요!

 

 

1. form 태그 작성

 

<form name='accountFrm' onSubmit={this.handleSubmit} encType='multipart/form-data'>
  <p><input type='text' name='email'></input></p>
  <p><input type='password' name='pwd'></input></p>
  <p><input type='password' name='pwdcheck'></input></p>
  <p><input type='text' name='name'></input></p>
  <p><input type='text' name='nickname'></input></p>
  <p><input type='text' name='phone'></input></p>
  <p><input type='file' accept='image/jpg,impge/png,image/jpeg,image/gif' name='profile_img'></input></p>
  <p><input type='submit' value='회원가입'></input></p>
</form>

 

 

 

2. handleSubmit메서드 작성

 

파일이 없는 일반 form태그였다면 json형식으로 만들었겠지만, 파일이 있다면 FormData로 만들어줘야 합니다.

formData로 만들어줘야 multer에서 인식하는 것 같음!

handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('email',event.target.email.value);
    formData.append('pwd', event.target.pwd.value);
    formData.append('profile_img', event.target.profile_img.files[0]);
    formData.append('name', event.target.name.value);
    formData.append('nickname', event.target.nickname.value);
    formData.append('phone', event.target.phone.value);

    this.register(formData)
  }

 

 

 

3.  fetch를 이용하여 서버(Node.js)로 보내기

 

여기서 주의할 점은 headers에 'Content-Type': 'multipart/form-data'을 추가해선 안 됩니다!(에러발생)

그냥 보내면 알아서 multipart/form-data로 자동으로 인식해줍니다.

register = (regiInfo) => {
    fetch('http://localhost:3002/users/account', {
      method:'post',
      body: regiInfo
    })
    .then(res => res.json())
    .then(data => alert(data.msg))
  }

 

 

 

4. 서버(Node.js)에서 multer를 이용한 업로드하기

 

router.post('/account', upload.single('profile_img'), function (req, res, next) {
  console.log('/account ' , req.body);
  console.log(req.file);
  console.log(req.file.filename);
  res.send({msg:'도착'});
})

콘솔 출력 모습