React를 사용한 드래그 앤 드롭 이미지 업로드

드래그 앤 드롭 파일 업로드 및 이미지 유효성 검사 기능을 제공하는 React 구성 요소입니다. 가볍고 사용자 정의가 쉽습니다.

사용 방법:

1. 설치하고 가져옵니다.

# Yarn
$ yarn add react-images-uploading

# NPM
$ npm i react-images-uploadingimport React from "react";
import ReactDOM from "react-dom";
import ImageUploading from "react-images-uploading";

2. 이 예에서는 앱에서 기본 이미지 업로더 구성 요소를 생성하는 방법을 보여줍니다.

function App() {
  const [images, setImages] = React.useState([]);
  const maxNumber = 69;
  const onChange = (imageList, addUpdateIndex) => {
    // data for submit
    console.log(imageList, addUpdateIndex);
    setImages(imageList);
  };
  return (
    <div className="App">
      <ImageUploading
        multiple
        value={images}
        onChange={onChange}
        maxNumber={maxNumber}
        dataURLKey="data_url"
      >
        {({
          imageList,
          onImageUpload,
          onImageRemoveAll,
          onImageUpdate,
          onImageRemove,
          isDragging,
          dragProps
        }) => (
          // write your building UI
          <div className="upload__image-wrapper">
            <button
              style={isDragging ? { color: "red" } : null}
              onClick={onImageUpload}
              {...dragProps}
            >
              Click or Drop here
            </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)}>Update</button>
                  <button onClick={() => onImageRemove(index)}>Remove</button>
                </div>
              </div>
            ))}
          </div>
        )}
      </ImageUploading>
    </div>
  );
}

3. 사용 가능한 소품.

value = [], // List of images
onChange,
onError,
children,
dataURLKey = DEFAULT_DATA_URL_KEY,
multiple = false,
maxNumber = INIT_MAX_NUMBER,
acceptType,
maxFileSize,
resolutionWidth,
resolutionHeight,
resolutionType,
inputProps = {},

시사:

GitHub에서 보기: https://github.com/vutoan266/react-images-uploading