react images uploading 다운로드 - react images uploading 소스 코드 다운로드

react images uploading

기타 소스코드

3.1.7

다운로드

반응 이미지 업로드

설치
용법
소품
- 메모
내보낸 옵션
기여자

설치

npm

npm install --save react-images-uploading

방사

yarn add react-images-uploading

용법

여기에서 기본 데모를 확인할 수 있습니다.

자바스크립트: https://codesandbox.io/s/react-images-uploading-demo-u0khz
타이프스크립트: https://codesandbox.io/s/react-images-uploading-demo-typescript-fr2zm
서버 측 렌더링(NextJS): https://codesandbox.io/s/react-images-uploading-ssr-j1qq2

기초적인

 import React from 'react' ;
import ImageUploading from 'react-images-uploading' ;

export 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' } : undefined }
              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 >
  ) ;
}

확인

...
  { ( { imageList , onImageUpload , onImageRemoveAll , 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 >
  ) }
...

드래그 앤 드롭

...
  { ( { imageList , dragProps , isDragging } ) => (
    < div { ... dragProps } >
      { isDragging ? "Drop here please" : "Upload space" }
      { imageList . map ( ( image , index ) => (
        < img key = { index } src = { image . data_url } / >
      ) ) }
    < / div >
  ) }
...

소품

매개변수	유형	옵션	기본	설명
값	정렬		[]	이미지 목록
변경 시	기능	(imageList, addUpdateIndex) => 무효		추가, 업데이트 또는 삭제 작업이 호출될 때 호출됩니다.
데이터URL키	끈		데이터URL	선택한 이미지의 base64가 할당된 사용자 정의 필드 이름
다수의	불리언		거짓	여러 항목을 선택하려면 `true` 설정하세요.
최대번호	숫자		1000	모드 = `multiple` 인 경우 사용자가 선택할 수 있는 이미지 수
오류 시	기능	(오류, 파일) => 무효		오류가 있을 때 호출됩니다.
수락 유형	정렬	['jpg', 'gif', 'png']	[]	업로드할 파일 확장자
최대파일크기	숫자			최대 이미지 크기(Byte)이며 유효성 검사에 사용됩니다.
해상도 유형	끈	'절대' \| '적다' \| '더' \| '비율'		제공된 너비 및 높이로 이미지 검증에 사용
해상도폭	숫자	> 0
해상도높이	숫자	> 0
inputProps	React.HTMLProps<HTMLInputElement>
허용비이미지 유형	불리언		거짓	이미지 유형이 아닌 목적으로 업로드하는 데 사용(예: txt, pdf, heic, ...)

메모

해상도 유형

값	설명
순수한	이미지 너비 === 해상도Width && 이미지 높이 === 해상도 높이
비율	(solutionWidth / 해상도Height) === (이미지 너비 / 이미지 높이)
더 적은	이미지 너비 < 해상도Width && 이미지 높이 < 해상도 높이
더	이미지 너비 > 해상도Width && 이미지 높이 > 해상도 높이

내보낸 옵션

매개변수	유형	설명
이미지 목록	정렬	렌더링할 이미지 목록입니다.
onImageUpload	기능	요소가 클릭되어 파일 대화 상자를 열 때 호출됩니다.
onImageRemoveAll	기능	모든 이미지를 제거할 때 호출됩니다.
onImageUpdate	(updateIndex: 숫자) => 무효	`updateIndex` 에서 이미지를 업데이트할 때 호출됩니다.
onImageRemove	(deleteIndex: 숫자 \| 숫자[]) => 무효	하나 또는 목록 이미지를 제거할 때 호출됩니다.
오류	물체	내보낸 검증 대상
드래그프롭	물체	드래그 앤 드롭 기능을 위한 기본 요소 소품
드래그 중	불리언	이미지를 드래그하는 경우 "true"