react images uploading Загрузка - react images uploading исходного кода

react images uploading

Другой исходный код

3.1.7

Скачать

реакция-загрузка изображений

Установка
Использование
Реквизит
- Примечание
Экспортированные параметры
Авторы

Установка

НПМ

npm install --save react-images-uploading

пряжа

yarn add react-images-uploading

Использование

Вы можете проверить базовую демонстрацию здесь:

Javascript: 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 >
  ) }
...

Реквизит

параметр	тип	параметры	по умолчанию	описание
ценить	множество		[]	Список изображений
onChange	функция	(imageList, addUpdateIndex) => void		Вызывается при вызове действия добавления, обновления или удаления.
dataURLKey	нить		URL-адрес данных	Настраиваемое имя поля, которому присвоено значение Base64 выбранного изображения.
несколько	логическое значение		ЛОЖЬ	Установите `true` для нескольких вариантов выбора
МаксНумбер	число		1000	Количество изображений, которые пользователь может выбрать, если режим = `multiple`
onError	функция	(ошибки, файлы) => void		Вызывается, когда есть ошибки
AcceptType	множество	['jpg', 'gif', 'png']	[]	Расширения файлов для загрузки
maxFileSize	число			Максимальный размер изображения (байт), который используется при проверке.
тип разрешения	нить	'абсолютный' \| 'меньше' \| 'больше' \| 'соотношение'		Использование для проверки изображения с указанной шириной и высотой.
разрешениеШирина	число	> 0
разрешениеВысота	число	> 0
входные реквизиты	React.HTMLProps<HTMLInputElement>
разрешитьнономажетипе	логическое значение		ЛОЖЬ	Использование для загрузки целей, отличных от изображения (например, txt, pdf, heic,...)

Примечание

тип разрешения

ценить	описание
абсолютный	ширина изображения === разрешениеШирина && высота изображения === разрешениеВысота
соотношение	(разрешениеШирина/РазрешениеВысота) === (ширина изображения/высота изображения)
меньше	ширина изображения <разрешениеШирина && высота изображения <разрешениеВысота
более	ширина изображения > разрешениеШирина и& высота изображения > разрешениеВысота

Экспортированные параметры

параметр	тип	описание
список изображений	множество	Список изображений для рендеринга.
onImageUpload	функция	Вызывается, когда элемент щелкает и вызывает открытие диалогового окна файла.
onImageRemoveAll	функция	Вызывается при удалении всех изображений
onImageUpdate	(updateIndex: число) => void	Вызывается при обновлении изображения в `updateIndex` .
onImageRemove	(deleteIndex: число \| число []) => void	Вызывается при удалении одного изображения или изображения списка.
ошибки	объект	Экспортированный объект проверки
перетаскиваниеProps	объект	Собственные реквизиты элемента для функции перетаскивания
isDraging	логическое значение	«истина», если изображение перетаскивается