@uiw/react-file-input

FileInput 上传输入框

这个组件仅仅是对 <input type="file"> 的美化，他是基于 Input 组件封装 。

import { FileInput } from 'uiw';
// or
import FileInput from '@uiw/react-file-input';

基础用法

import React from 'react';
import { FileInput, Button } from 'uiw';

export default function Demo() {
  const onChange = (e) => {
    console.log(e)
  }
  return (
    <div>
      <FileInput multiple="multiple" style={{ maxWidth: 200 }} size="small" onChange={onChange} />
      <br />
      <FileInput multiple="multiple" style={{ maxWidth: 200 }} />
      <br />
    </div>
  )
}

图片墙

import React from 'react';
import { FileInput, Button, Icon } from 'uiw';

export default function Demo() {
  return (
    <div>
      <FileInput
        uploadType="card"
        size="large"
        showFileIcon={{
          showPreviewIcon: false,
          showRemoveIcon: true
        }}
        onPreview={(file) => console.log(file)}
        value={[
          { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4'}
        ]}
        onChange={(items) => console.log(items)}
      >
        <Icon type="plus" />
      </FileInput>
      <br />
      <FileInput
        uploadType="card"
        shape="circle"
        showFileIcon={{
          showPreviewIcon: false,
          showRemoveIcon: true
        }}
        onPreview={(file) => console.log(file)}
        value={[
          { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4'}
        ]}
        onChange={(items) => console.log(items)}
      >
        <Icon type="plus" />
      </FileInput>
      <br />
      <FileInput
        uploadType="card"
        size="small"
        showFileIcon={{
          showPreviewIcon: false,
          showRemoveIcon: true
        }}
        onPreview={(file) => console.log(file)}
        value={[
          { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4'}
        ]}
        onChange={(items) => console.log(items)}
      >
        <Icon type="plus" />
      </FileInput>
    </div>
  )
}

图片预览

import React from 'react';
import { FileInput, Overlay, Icon } from 'uiw';

export default function Demo() {
  const [visible,visibleSet]=React.useState(false)
  const [curfile,curFileSet]=React.useState(null)
  console.log('curfile',curfile)

   return(
     <>
      <Overlay
        isOpen={visible}
        onClosed={()=>visibleSet(false)}
      >
        <img src={`${curfile?.dataURL}`} alt={`${curfile?.name}`} />
      </Overlay>
      <FileInput
        uploadType="picture"
        size="large"
        onPreview={(file) =>{
          visibleSet(true)
          curFileSet(file)
        }}
        value={[
          { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
        ]}
      >
        <Icon type="plus" />
      </FileInput>
    </>
   )
}

图片列表样式

import React from 'react';
import { FileInput, Button } from 'uiw';

export default function Demo() {
  return (
    <div>
      <FileInput
        uploadType="picture"
        size="large"
        onPreview={() => console.log(234)}
        value={[
          { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
        ]}
      >
        <Button>新增</Button>
      </FileInput>
      <br />
      <FileInput
        uploadType="picture"
        shape="circle"
        onPreview={() => console.log(234)}
        value={[
          { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
        ]}
      >
        <Button>新增</Button>
      </FileInput>
      <br />
      <FileInput
        uploadType="picture"
        size="small"
        onPreview={() => console.log(234)}
        value={[
          { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
        ]}
      >
        <Button>新增</Button>
      </FileInput>
      <br />
      <FileInput
        uploadType="text"
        multiple
        maxNumber={2}
        value={[
          { dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
        ]}
      >
        <Button>新增</Button>
      </FileInput>
    </div>
  );
}

在 Form 表单中使用

import React,{ useRef } from 'react';
import { Form, Row, Col, Icon,FileInput,Button } from 'uiw';

export default function Demo() {
  const form = useRef()
  return (
    <div>
      <Button
        type="danger" 
        onClick={()=>{
          const value =  form.current.getFieldValues()
          form.current.setFields({
            ...value,
            picture1:[],
            picture2:[],
            picture3:[]
          })
        }}
      > 
        清空照片
      </Button>
      <Form
        ref={form}
        onSubmit={({initial, current}) => {
          console.log('current',current)
        }}
        fields={{
          picture1: {
            label: '图片墙',
            initialValue: [
              {
                dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'
              }
            ],
            children: (
              <FileInput uploadType="card">
                <Icon type="plus" />
              </FileInput>
            )
          },
          picture2: {
            label: '图片列表',
            initialValue: [
              {
                dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'
              }
            ],
            children: (
              <FileInput uploadType="picture">
                <Button>新增</Button>
              </FileInput>
            )
          },
          picture3: {
            label: '图片名称列表',
            children: (
              <FileInput uploadType="text">
                <Button>新增</Button>
              </FileInput>
            )
          },
        }}>
        {({ fields, state, canSubmit }) => {
          return (
            <div>
              <Row>
                <Col>{fields.picture1}</Col>
              </Row>
              <Row>
                <Col>{fields.picture2}</Col>
              </Row>
              <Row>
                <Col>{fields.picture3}</Col>
              </Row>
              <Row gutter={10}>
                <Col>
                  <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
                </Col>
              </Row>
              <Row>
                <Col>
                  <pre style={{ padding: '10px 0 0 10px' }}>
                    {JSON.stringify(state.current, null, 2)}
                  </pre>
                </Col>
              </Row>
            </div>
          )
        }}
      </Form>
    </div>
  )
}

Props

• uploadType: input 基础输入框上传
• uploadType: picture 图片列展示列表，显示图片
• uploadType: text 图片列展示列表，不显示图片
• uploadType: card 图片墙列表

参数	说明	类型	默认值
uploadType	上传展示类型	input、picture、text、card	input
className	CSS类名称	String	-
multiple	是否多选上传	boolean	-

Props uploadType input类型

参数	说明	类型	默认值
dataLabel	input 后置文字	string	Browse

更多属性文档请参考 Input。

Props uploadType 非input类型

参数	说明	类型	默认值
value	默认图片列表	FileInputValue[]	-
readonly	是否是只读模式	boolean	false
maxNumber	文件上传数量	boolean	false
shape	图片展示形状	circle、round	round
size	图片展示大小	large、middle、small	middle
showFileIcon	设置图标按钮是否展示	{showPreviewIcon?: boolean,showRemoveIcon?: boolean}	{showPreviewIcon: true, showRemoveIcon: true}
onChange	文件上传回调	(value: FileInputValue[]) => void	-
onPreview	预览图标时的回调	(value: FileInputValue[]) => void	-