초심자를 위한 fileupload 클라이언트 팁

File upload는 대부분의 앱/웹에서 사용되는 아주 기본적인 기능

 

클라이언트 사이드에서의 처리는 생각보다 간단하다.

 

1. input type='file'로 태그를 생성하고,

 

2. onChange 이벤트리스너를 통해 ev.target.files[0]으로 선택된 파일을 읽어와 변수에 담는다.

 

3. 서버로 보내준다. 보내줄때는 formdata에 넣어보내줘야한다.

const formdata = new Formdata();

formdata.append('photo', file);

여기서 photo는 서버에서 해당 요청을 받을때 사용하게된다.

(예를들어, multer를 이용한 미들웨어에서 사용한다면 photo.upload(photo);

이때는 헤더설정도 해줘야한다. 

const config = { headers: { 'Content-Type': 'multipart/form-data' } }; << 이렇게

axios.post(url, formdata, config) 와 같이 서버에 요청을 날리면된다.

 

 

 

---

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud