2022년 6월 13일 왜안돼?

• 만만히 봤다. 백엔드의 기능요청 제안은 매우매우 조심히 신중하게 받아야 한다는걸 알게되었다. 다른 팀들에 비해서도 많았던 api기능들을 그래도 열심히 하면 되겠지 라고 생각했는데 개뿔. 게시물 올리는 페이지에서 여러 이미지 파일의 url가지고 오는걸로만 4시간은 썼다. 왜 아까 잘 되던 코드가 불통이 되어 버린 것일까. 분하다. 내일 계속.

오늘 배운 것

react에서 Img파일 업로드하기

1. type="file"의 input을 만든다.

2. 여러 이미지를 추가하려면 multiple 필수. 업로드 가능한 이미지 파일 지정은 accept 속성에서 한다.

3. fomr 안에 있는 input들의 값은 formData로 관리할 수 있다.(텍스트, 파일 등)

 

*단 가져온 formData의 값은 빈 객체로 뜬다.forEach로만 그 값을 확인할 수 있음.

 

참고: 

https://taehoblog.netlify.app/react/previewimg/

[React] Preview Image - 이미지 미리보기

https://mosei.tistory.com/entry/Javascript-FormData%EC%97%90-%ED%8C%8C%EC%9D%BC-%EB%B0%B0%EC%97%B4-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%EB%B0%8F-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%99%95%EC%9D%B8

[Javascript] FormData에 파일 배열 사용하기 및 데이터 확인