드래그 앤 드롭 파일 업로드 및 이미지 유효성 검사 기능을 제공하는 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>
<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