codestates / codestates/Senna-server

[Error] MulterError: Unexpected field

Open
#28 0 comments 0 reactions 0 assignees View on GitHub
Error
Dominant language
JavaScript
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

### 어떤 에러인가요?

multer로 클라단에서 form-data를 보냈을 때 발생한 에러

### $ 터미널의 에러 코드를 여기 넣어주세요.
- 서버단
```
import multer from 'multer';

const upload = multer({
dest: 'uploads/'
})

router.post('/upload', upload.single('avatar'), userController.upload);
```

- 클라단
```
const formData = new FormData();
formData.append('files', event.target.files[0]);
```

### 에러 핸들링 방법
1) req.body와 req.file로 요청시 들어오는 데이터를 찍어보았는데 데이터가 제대로 들어오지 못했다.
- req.body : {} / req.file : undefined
2) 클라단에서 formData에 img file 객체가 들어가는지 콘솔로 확인했을 때 데이터가 잘 담겼다.
3) 서버쪽에서 데이터를 못받아 오는지 EC2 서버가 아닌 로컬에서 postman으로 테스트하였고, 이미지 파일 데이터가 들어오는 것을 확인할 수 있었다.
![image](https://user-images.githubusercontent.com/77980674/123671742-92c5a180-d879-11eb-9c95-232bfdf68ab5.png)
4) formData객체로 append 할 때 업로드 파일 객체가 인식이 안되고 있는 것 같았고, append시 키를 'avatar'로 수정해주었다.

```
formData.append('avatar', event.target.files[0]);
```

--> 핵심 : upload.single('avatar') = input tag name = formData.append('avatar', ..)

### 에러 핸들링을 위해 참고한 레퍼런스 링크

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.