react antd图片上传
时间: 2023-09-10 09:14:32 浏览: 60
你可以使用 Ant Design 的 Upload 组件来实现图片上传功能。首先,需要安装 Ant Design:
```
npm install antd
```
然后,在你的 React 组件中引入 Upload 组件:
```jsx
import { Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
class Avatar extends React.Component {
state = {
loading: false,
imageUrl: ''
};
handleChange = info => {
if (info.file.status === 'uploading') {
this.setState({ loading: true });
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl =>
this.setState({
imageUrl,
loading: false,
}),
);
}
};
render() {
const { loading, imageUrl } = this.state;
const uploadButton = (
<div>
{loading ? <LoadingOutlined /> : <PlusOutlined />}
<div className="ant-upload-text">Upload</div>
</div>
);
return (
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
beforeUpload={beforeUpload}
onChange={this.handleChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
</Upload>
);
}
}
```
这个例子中,我们定义了一个 Avatar 组件,其中包含一个 Upload 组件。我们设置了 Upload 组件的 name、listType、className、showUploadList、action、beforeUpload 和 onChange 属性。其中:
- name 表示上传文件的参数名;
- listType 表示上传列表的样式,这里设置为 picture-card;
- className 表示 Upload 组件的类名;
- showUploadList 表示是否显示上传列表;
- action 表示上传的 URL;
- beforeUpload 是一个函数,用于上传前的校验;
- onChange 是一个函数,用于上传后的处理。
在 handleChange 函数中,我们根据上传文件的状态来处理上传结果,并将图片的 base64 编码保存到 state 中。最后,我们将图片显示出来,如果没有上传图片,则显示上传按钮。
在 beforeUpload 函数中,我们可以进行上传前的校验。例如,限制上传图片的大小和类型:
```jsx
function beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('You can only upload JPG/PNG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 2MB!');
}
return isJpgOrPng && isLt2M;
}
```
这个例子中,我们限制上传图片的类型为 JPG 和 PNG,大小不超过 2MB。
最后,需要引入 message、LoadingOutlined 和 PlusOutlined 组件:
```jsx
import { Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
```
这样,就可以使用 Ant Design 的 Upload 组件实现图片上传功能了。
相关推荐
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)