이미지 업로드하기파일 업로드는 Show 파일 선택 input 만들기
위와 같이 입력 하면 아래와 같은 input창이 나오게 된다. file 유형의 input요소에는 파일을 하나 혹은 여러개 선택 할수 있다( 선택된 파일 읽기
1개 파일을 선택하더라도 파일 전송하기전송을 위한 버튼을 반든후 onClick함수를 정의해준다. 이미지 파일을 보내기 위해서는 FormData 객체에 하나의 파일을 전송하기 위해
업로드한 이미지 미리보기이미지 업로드하기 전에 어떤 이미지를 선택했는지 미리보여주고, 대표이미지를 설정하거나, 필요없는 파일은 삭제하도록 하는 기능이 필요하다. 해당 포스트는 미리보기 기능을 구현하는 방법이다.
해당 태그의 style속성인
backgroundImage에 이미지를 적용시켜 줄것이다. url에 주소를 입력해 주어야 하는데 , reader를 콘솔에 찍어보면 다음과 같은 결과를 보여준다. reader.result 값을 backgroundImage 속성에 적용 시켜 주면 다음과 같은 결과가 보여진다.
본 게시물에서는 html input 태그로 이미지 파일을 여러 장 추가하고, 양식을 제출하기 전에 미리 이미지를 띄워 preview 할 수 있도록 구현한 것을 정리해 보았다. 구현 전에, 우리가 쓸 요소와 구조가 어떻게 이루어질지 먼저 정리해보자. 먼저 알아가기<input type="file" /> 에 대해서타입이 file인 input 태그는 파일을 추가할 수 있는 기능이 들어있다. 이 태그를 사용하면 html에서 기본으로 제공해주는 버튼이 등장한다. 파일 선택 버튼을 클릭하여 파일을 선택하면 파일명이 나온다. - multiple 속성만약 한꺼번에 여러 개의 파일을 선택하고 싶다면 input 태그에
속성 multiple이 있는 상태에서 파일을 여러 개 추가해주면 파일명이 나열 되는 게 아니고 사진과 같이 - accept 속성
어떤 형식의 파일을 받을 것인가를 적는 속성이다. - onChange 이벤트우리가 파일선택 버튼을 클릭한 후 파일을 선택하여 추가하는 행위는 onClick이 아닌 onChange 이벤트에 속한다. 그러므로 preview를 만드는 함수는 onChange 이벤트 안에서 이루어진다. e.target.files의 타입파일 선택을 하면 onChange 이벤트가 발생한다. 여기서 e.target.files을 가져와 보면 FileList 타입의 객체 안에 File 타입의 요소(우리가 선택한 파일)가 나열된다. 우리가 해야 할 것은 이 객체를 배열로 만들어 요소 하나하나를 url로 변환해 주는 것이다. 객체를 배열로 변환하듯이 Array.from 메서드를 사용하여 변환하면 되는데 타입스크립트를 쓴다면 신경을 조금 써줘야 한다. onChange 이벤트에서 가져온 event부터 event.target, event.target.files까지 전부 타입을 지정해주어야 한다. 구현
1. 파일 선택 버튼 커스텀하기
2. 이미지들이 보일 preview 자리 만들기
3. 이미지 파일들로 이루어진 배열 상태 값 만들기현재 상태에서는 파일 추가가 안된다. e.target.files는 객체이며 이전 파일들이 남아있는 상태에서 쌓이는 게 아니고 파일선택 버튼을 누를 때마다 선택한 파일들이 초기화되기 때문에 배열에 내가 선택한 이미지 파일들이 stack처럼 쌓일 수 있도록 함수를 만들어줘야 한다.
4. 이미지 파일을 stack처럼 쌓기 위한 함수 만들기지금부터 input 태그의 onChange 이벤트(파일을 선택하는 행위)가 발생하면 실행될 함수를 만든다.
- handleChange
5. 배열 상태 값(images)을 map으로 돌려 이미지 뿌리기
여기까지 preview를 구현해보았다. . +추가로 가로스크롤 (tailwind)css는:
참고
|