ant-design实现多文件上传
时间: 2023-07-26 15:03:27 浏览: 52
Ant Design提供了一个Upload组件,可以用来实现多文件上传功能。你可以按照以下步骤来使用它:
1. 安装Ant Design依赖包:
```
npm install antd --save
```
2. 引入Upload组件和Button组件:
```
import { Upload, Button } from 'antd';
```
3. 在render函数中添加Upload组件:
```
<Upload>
<Button>
选择文件
</Button>
</Upload>
```
4. 添加onChange事件处理函数来处理上传的文件:
```
<Upload onChange={this.handleUpload}>
<Button>
选择文件
</Button>
</Upload>
```
5. 在handleUpload函数中处理上传的文件:
```
handleUpload = (info) => {
const { status } = info.file;
if (status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (status === 'done') {
message.success(`${info.file.name} 文件上传成功。`);
} else if (status === 'error') {
message.error(`${info.file.name} 文件上传失败。`);
}
}
```
完整的代码示例:
```
import React from 'react';
import { Upload, Button, message } from 'antd';
class UploadFile extends React.Component {
handleUpload = (info) => {
const { status } = info.file;
if (status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (status === 'done') {
message.success(`${info.file.name} 文件上传成功。`);
} else if (status === 'error') {
message.error(`${info.file.name} 文件上传失败。`);
}
}
render() {
return (
<Upload onChange={this.handleUpload}>
<Button>
选择文件
</Button>
</Upload>
);
}
}
export default UploadFile;
```