[#. react-images-uploading] react에서 react-images-uploading를 이용해서 이미지 올리기, 이미지 수정/삭제하기

 

 

 

 

 

 

상품을 구입한 사람에게만 이렇게 리뷰를 쓸 수 있는 영역이 노출되도록 했다

리뷰에는 텍스트와 이미지를 둘다 올릴 수 있다

이때 이미지를 업로드하기 위해 react-images-uploading를 이용해 보자

 

 

 

 

 

 

www.npmjs.com/package/react-images-uploading

react-images-uploading

 

 

 

 

① react-images-uploading 설치

 

npm install --save react-images-uploading

 

 

 

 

② view 수정

 

import React, { useState } from 'react';
import ImageUploading from 'react-images-uploading';
import { PictureOutlined } from '@ant-design/icons'


function UploadImage() {

  const [images, setImages] = useState([]);
  const maxNumber = 4;

  const onChange = (imageList, addUpdateIndex) => {
    // data for submit
    console.log(imageList, addUpdateIndex);
    setImages(imageList);
  };

  return (
    <>
      <ImageUploading
        multiple
        value={images}
        onChange={onChange}
        maxNumber={maxNumber}
        dataURLKey="data_url"
        onError={onError}
        >
        {({
          imageList,
          onImageUpload,
          onImageRemoveAll,
          onImageUpdate,
          onImageRemove,
          isDragging,
          dragProps,
        }) => (
          // write your building UI
          <div className="upload__image-wrapper">
            <button
              style={isDragging ? { color: 'red' } : undefined}
              onClick={onImageUpload}
              {...dragProps}
            >
              <PictureOutlined /> 사진추가
            </button>
            &nbsp;
           {/* <button onClick={onImageRemoveAll}>Remove all images</button> */}
            {imageList.map((image, index) => (
              <div key={index} className="image-item">
                <img src={image['data_url']} alt="" width="100" />
                <div className="image-item__btn-wrapper">
                  <button onClick={() => onImageUpdate(index)}>수정</button>
                  <button onClick={() => onImageRemove(index)}>삭제</button>
                </div>
              </div>
            ))}
          </div>
        )}
      </ImageUploading>
    </>
  )
}

export default UploadImage;

 

 

 

 

 

③ 이미지 업로드 개수 제한(4개)

 

업로드할 수 있는 이미지 개수를 4개로 제한하고, alert 메시지를 띄워보자

 

 

onErrror()를 사용하면 된다고 한다

 

function UploadImage() {

  const [images, setImages] = useState([]);
  const maxNumber = 4;

  const onChange = (imageList, addUpdateIndex) => {
    // data for submit
    console.log(imageList, addUpdateIndex);
    setImages(imageList);
  };

  // 추가
  const onError = (errors, files) => {
    if(errors.maxNumber) {
      alert("이미지는 4개까지만 첨부할 수 있습니다")
    }
  }

  return (
    <>
      <ImageUploading
        multiple
        value={images}
        onChange={onChange}
        maxNumber={maxNumber}
        dataURLKey="data_url"
        onError={onError}			// 추가
        >
        {({
          imageList,
          onImageUpload,
          onImageRemoveAll,
          onImageUpdate,
          onImageRemove,
          isDragging,
          dragProps,
        }) => (
          // write your building UI
          <div className="upload__image-wrapper">
            <button
              style={isDragging ? { color: 'red' } : undefined}
              onClick={onImageUpload}
              {...dragProps}
            >
              <PictureOutlined /> 사진추가
            </button>
            &nbsp;
           {/* <button onClick={onImageRemoveAll}>Remove all images</button> */}
            {imageList.map((image, index) => (
              <div key={index} className="image-item">
                <img src={image['data_url']} alt="" width="100" />
                <div className="image-item__btn-wrapper">
                  <button onClick={() => onImageUpdate(index)}>수정</button>
                  <button onClick={() => onImageRemove(index)}>삭제</button>
                </div>
              </div>
            ))}
          </div>
        )}
      </ImageUploading>
    </>
  )
}

export default UploadImage;

 

 

개수 관련 error가 있을 경우 console.log(erros) 찍어봤을 때 아래처럼 maxNumber: true로 뜬다

개수 관련 에러가 있다는 것이다

 

 

 

maxNumber 말고도 acceptType, maxFileSize, resolution 에러를 잡아올 수 있다

 

  {({ errors }) => (
    errors && <div>
      {errors.maxNumber && <span>Number of selected images exceed maxNumber</span>}
      {errors.acceptType && <span>Your selected file type is not allow</span>}
      {errors.maxFileSize && <span>Selected file size exceed maxFileSize</span>}
      {errors.resolution && <span>Selected file is not match your desired resolution</span>}
    </div>
  )}

 

 

 

 

 

 

 

이렇게 잘 뜬다