好的，您可以按照以下步骤来实现
antd upload上传图片：
1. 首先安装
antd和axios。
```bash
npm install
antd axios --save
```
2. 在您的组件中引入
antd upload组件。
```
javascript
import {
Upload, message } from '
antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
class
UploadImage 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 style={{ marginTop: 8 }}>
Upload</div>
</div>
);
return (
<
Upload
name="avatar"
listType="picture-card"
className="avatar-
uploader"
show
UploadList={false}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
before
Upload={before
Upload}
onChange={this.handleChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> :
uploadButton}
</
Upload>
);
}
}
```
3. 在handleChange方法中，您需要将
上传的图片转换为base64格式，以便于后续的保存和显示。
```
javascript
import {
Upload, message } from '
antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
class
UploadImage 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 style={{ marginTop: 8 }}>
Upload</div>
</div>
);
return (
<
Upload
name="avatar"
listType="picture-card"
className="avatar-
uploader"
show
UploadList={false}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
before
Upload={before
Upload}
onChange={this.handleChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> :
uploadButton}
</
Upload>
);
}
}
```
4. 最后，在handleSubmit方法中，您可以将base64格式的图片传给后端进行保存。
```
javascript
import {
Upload, message } from '
antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import axios from 'axios';
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
class
UploadImage 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,
}),
);
}
};
handleSubmit = () => {
axios.post('/api/
upload', {
image: this.state.imageUrl,
}).then(response => {
message.success('Image
uploaded successfully!');
}).catch(error => {
message.error('Failed to
upload image!');
});
};
render() {
const { loading, imageUrl } = this.state;
const
uploadButton = (
<div>
{loading ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 8 }}>
Upload</div>
</div>
);
return (
<div>
<
Upload
name="avatar"
listType="picture-card"
className="avatar-
uploader"
show
UploadList={false}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
before
Upload={before
Upload}
onChange={this.handleChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> :
uploadButton}
</
Upload>
<Button type="primary" onClick={this.handleSubmit}>Submit</Button>
</div>
);
}
}
```
以上就是
antd upload上传图片的实现步骤。
扫一扫
5135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
