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

道具

范围	类型	选项	默认	描述
价值	大批		[]	图片列表
改变时	功能	(imageList, addUpdateIndex) => 无效		调用添加、更新或删除操作时调用
数据URL键	细绳		数据URL	所选图像的base64分配到的自定义字段名称
多种的	布尔值		错误的	为多项选择设置`true`
最大数量	数字		1000	如果模式 = `multiple`用户可以选择的图像数量
错误时	功能	（错误，文件）=> void		出现错误时调用
接受类型	大批	['jpg'、'gif'、'png']	[]	要上传的文件扩展名
最大文件大小	数字			最大图像大小（字节）及其用于验证
分辨率类型	细绳	'绝对' \| '少' \| '更多' \| '比率'		用于具有提供的宽度和高度的图像验证
分辨率宽度	数字	> 0
分辨率高度	数字	> 0
输入属性	React.HTMLProps<HTMLInputElement>
允许非图像类型	布尔值		错误的	用于上传非图像类型目的（例如txt、pdf、heic...）

笔记

分辨率类型

价值	描述
绝对	图像的宽度 === 分辨率宽度 && 图像的高度 === 分辨率高度
比率	(分辨率宽度/分辨率高度) ===(图像宽度/图像高度)
较少的	图像的宽度 < 分辨率宽度 && 图像的高度 < 分辨率高度
更多的	图像的宽度 > 分辨率宽度 && 图像的高度 > 分辨率高度

导出选项

范围	类型	描述
图片列表	大批	要渲染的图像列表。
图片上传	功能	单击元素并触发打开文件对话框时调用
onImageRemoveAll	功能	删除所有图像时调用
图像更新时	（更新索引：数字）=> 无效	在`updateIndex`处更新图像时调用。
图像删除时	(deleteIndex: 数字 \| 数字[]) => void	删除一张或列表图像时调用。
错误	目的	导出的验证对象
拖动道具	目的	用于拖放功能的原生元素道具
正在拖动	布尔值	如果正在拖动图像，则为“true”