Skip to content

Latest commit

 

History

History

react-file-input

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 

README.md

FileInput 上传输入框

Buy me a coffee Open in unpkg NPM Downloads npm version

这个组件仅仅是对 <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 -