리액트 이미지 업로드 미리보기

일단 이미지를 업로드하면 이미지 파일을 데이터에 저장하고 미리보기로 띄울 이미지를

Data URL로 변환하고, 그 URL을 사용하여 이미지를 임시로 보여주는 코드를 반들어봤다

  let [thumnail, setThumnail] = useState('); // 이미지 미리보기  생성
    if (name === 'img') {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onloadend = () => {
          setThumnail(reader.result);
        };
        reader.readAsDataURL(file);
      }

    }

onChange 이벤트를 줘서 e.target.name이 img 일떄 전송할 form데이터에 이미지를 파일형태로 저장하고

FileReader는 웹 애플리케이션에서 파일을 비동기적으로 읽을 수 있게 해주는 JavaScript 객체고

reader.readAsDataURL(file);는 File 객체인 file을 Data URL로 변환하여 읽어오고 Data URL은 Base64 인코딩된 데이터로 이루어져 있어, 이미지를 문자열 형태로 표현할 수 있다.

미리 보여줄 이미지가 여러개일시

  let [thumnail, setThumnail] = useState([]); // 이미지 미리보기 썸네일 배열로 생성
  
  
    const handleChange = (e, n) => {
    const { name, value } = e.target;
    setForm({ ...form, [name]: value }); //input 값 onChange시 value값 재 할당

    if (name === 'img') {
      const file = e.target.files[0];
   
      if (file && thumnail.length <= 4) {
        const reader = new FileReader();
        reader.onloadend = () => {
          setThumnail([...thumnail, reader.result]);
        };
        reader.readAsDataURL(file);
      } else {
        alert('이미지는 5장까지 업로드 가능합니다.')
      }



  }

setThumnail([...thumnail, reader.result]); 을 이용해 배열로 thumnail에 이미지 url을 저장하고 5장이 넘어가면 이미지 저장 불가

              {thumnail.length ? thumnail.map((photo, i) =>
                <span className="previewContainer">
                  <img src={photo} className='photoPreview' />
                  <button className="imgClose" type="button" value={i} onClick={closeImg}><CgClose /></button>
                </span>)
                :

이미지 삭제 버튼과 함께 생성하면

이미지 삭제 버튼 클릭시 이벤트

  let closeImg = (e) => setThumnail(thumnail = thumnail.filter(v => v !== thumnail[e.target.value]))
    
  

e.target.value가 아닌것만 필터하면 삭제해 setThumnail에 넣어주면 삭제 완료 !