Upload 上传

支持拖放的文件上传组件。

导入

import { Upload } from 'asterui'

示例

基础上传

带按钮触发器的简单文件上传。

</>

import { Upload, Button } from 'asterui'

function App() {
  return (
      <Upload>
        <Button>Click to Upload</Button>
      </Upload>
    )
}

export default App

拖放

将文件拖到上传区域。

</>

import { Upload } from 'asterui'

function App() {
  return (
      <Upload.Dragger>
        <p className="text-4xl mb-4">📁</p>
        <p className="text-lg">Click or drag file to this area to upload</p>
        <p className="text-sm opacity-60">Support for single or bulk upload</p>
      </Upload.Dragger>
    )
}

export default App

图片卡片

将上传的图片显示为卡片。

</>

import { Upload } from 'asterui'
import { useState } from 'react'

function App() {
  interface UploadFile {
    uid: string
    name: string
    status?: 'uploading' | 'done' | 'error' | 'removed'
    url?: string
    thumbUrl?: string
    percent?: number
  }
  
  const [fileList, setFileList] = useState<UploadFile[]>([
    {
      uid: '-1',
      name: 'image1.png',
      status: 'done',
      url: 'https://picsum.photos/200',
    },
  ])
  
  return (
      <Upload
        listType="picture-card"
        fileList={fileList}
        onChange={({ fileList }) => setFileList(fileList)}
      >
        {fileList.length < 5 && (
          <div className="flex flex-col items-center">
            <span className="text-2xl">+</span>
            <span className="text-sm">Upload</span>
          </div>
        )}
      </Upload>
    )
}

export default App

受控上传

使用状态和自定义请求控制文件列表。

</>

import { Upload, Button } from 'asterui'
import { useState } from 'react'

function App() {
  interface UploadFile {
    uid: string
    name: string
    status?: 'uploading' | 'done' | 'error' | 'removed'
    url?: string
    thumbUrl?: string
    percent?: number
  }
  
  const [fileList, setFileList] = useState<UploadFile[]>([])
  
  const handleChange = ({ fileList }: { fileList: UploadFile[] }) => {
    setFileList(fileList)
  }
  
  const customRequest = ({ file, onSuccess }: { file: File; onSuccess: () => void }) => {
    // Simulate upload
    setTimeout(() => {
      onSuccess()
    }, 1000)
  }
  
  return (
      <div>
        <Upload
          fileList={fileList}
          onChange={handleChange}
          customRequest={customRequest}
          maxCount={3}
        >
          <Button>Upload (max 3)</Button>
        </Upload>
        <p>Files: {fileList.length}/3</p>
      </div>
    )
}

export default App

最大文件大小

使用验证限制文件大小。

</>

import { Upload, Button } from 'asterui'

function App() {
  return (
      <Upload maxSize={1024 * 1024 * 5}>
        <Button>Upload (max 5MB)</Button>
      </Upload>
    )
}

export default App

接受文件类型

限制可以上传的文件类型。

</>

import { Upload, Button } from 'asterui'

function App() {
  return (
      <Upload accept="image/*">
        <Button>Upload Images Only</Button>
      </Upload>
    )
}

export default App

在表单中

与 Form 组件集成的上传。

</>

import { Upload, Button, Form } from 'asterui'

function App() {
  const handleSubmit = (values: Record<string, unknown>) => {
    console.log(values)
  }
  
  return (
      <Form onFinish={handleSubmit}>
        <Form.Item
          name="avatar"
          label="Avatar"
          required
          rules={{
            required: 'Please upload an avatar',
          }}
        >
          <Upload listType="picture-card" maxCount={1}>
            <div className="flex flex-col items-center">
              <span className="text-2xl">+</span>
              <span className="text-sm">Upload</span>
            </div>
          </Upload>
        </Form.Item>
  
        <Form.Item name="documents" label="Documents">
          <Upload maxCount={5}>
            <Button>Upload Documents</Button>
          </Upload>
        </Form.Item>
  
        <Form.Item>
          <Button htmlType="submit" color="primary">
            Submit
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

API

Upload

属性	描述	类型	默认值
fileList	受控的已上传文件列表	UploadFile[]	-
onChange	文件列表更改时的回调	({ fileList }) => void	-
customRequest	自定义上传请求处理程序	({ file, onSuccess, onError }) => void	-
listType	文件列表的显示样式	'text' | 'picture' | 'picture-card'	'text'
maxCount	最大文件数	number	-
maxSize	最大文件大小(字节)	number	-
accept	接受的文件类型	string	-
disabled	禁用上传	boolean	false
children	上传触发器元素	React.ReactNode	-
className	额外的 CSS 类	string	-

可访问性

• 文件输入正确标记
• 拖放区域支持键盘
• 上传进度向屏幕阅读器宣布
• 删除按钮可通过键盘访问