FileInput component
npm install @uiw/react-file-inputFileInput 上传输入框
===




这个组件仅仅是对 的美化,他是基于 Input 组件封装 。
``jsx`
import { FileInput } from 'uiw';
// or
import FileInput from '@uiw/react-file-input';
`jsx mdx:preview&bg=#fff
import React from 'react';
import { FileInput, Button } from 'uiw';
export default function Demo() {
const onChange = (e) => {
console.log(e)
}
return (
$3
`jsx mdx:preview&bg=#fff
import React from 'react';
import { FileInput, Button, Icon } from 'uiw';export default function Demo() {
return (
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)}
>
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)}
>
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)}
>
)
}
`$3
`jsx mdx:preview&bg=#fff
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(
<>
isOpen={visible}
onClosed={()=>visibleSet(false)}
>
${curfile?.dataURL}} alt={${curfile?.name}} />
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' }
]}
>
>
)
}
`
$3
`jsx mdx:preview&bg=#fff
import React from 'react';
import { FileInput, Button } from 'uiw';export default function Demo() {
return (
uploadType="picture"
size="large"
onPreview={() => console.log(234)}
value={[
{ dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
]}
>
uploadType="picture"
shape="circle"
onPreview={() => console.log(234)}
value={[
{ dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
]}
>
uploadType="picture"
size="small"
onPreview={() => console.log(234)}
value={[
{ dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
]}
>
uploadType="text"
multiple
maxNumber={2}
value={[
{ dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png' }
]}
>
);
}
`$3
`jsx mdx:preview&bg=#fff
import React,{ useRef } from 'react';
import { Form, Row, Col, Icon,FileInput,Button } from 'uiw';export default function Demo() {
const form = useRef()
return (
type="danger"
onClick={()=>{
const value = form.current.getFieldValues()
form.current.setFields({
...value,
picture1:[],
picture2:[],
picture3:[]
})
}}
>
清空照片
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: (
)
},
picture2: {
label: '图片列表',
initialValue: [
{
dataURL: 'https://avatars2.githubusercontent.com/u/1680273?s=40&v=4', name: 'uiw.png'
}
],
children: (
)
},
picture3: {
label: '图片名称列表',
children: (
)
},
}}>
{({ fields, state, canSubmit }) => {
return (
{fields.picture1}
|
{fields.picture2}
|
{fields.picture3}
|
|
{JSON.stringify(state.current, null, 2)}
|
)
}}
)
}
`Props
-
uploadType: input 基础输入框上传
- uploadType: picture 图片列展示列表,显示图片
- uploadType: text 图片列展示列表,不显示图片
- uploadType: card 图片墙列表| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| uploadType | 上传展示类型 |
input、picture、text、card | input |
| className | CSS类名称 | String | - |
| multiple | 是否多选上传 | boolean | - |
$3
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| dataLabel | input 后置文字 |
string | Browse |更多属性文档请参考 Input。
$3
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| value | 默认图片列表 | FileInputValue[] | - |
| readonly | 是否是只读模式 | boolean | false |
| maxNumber | 文件上传数量 | boolean | false |
| shape | 图片展示形状 |
circle、round | round |
| size | 图片展示大小 | large、middle、small | middle` |