ant-design/components/upload/demo/upload-manually.md

100 lines
2.1 KiB
Markdown

---
order: 7
title:
zh-CN: 手动上传
en-US: Upload manually
---
## zh-CN
`beforeUpload` 返回 `false` 后,手动上传文件。
## en-US
Upload files manually after `beforeUpload` returns `false`.
```jsx
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
class Demo extends React.Component {
state = {
fileList: [],
uploading: false,
};
handleUpload = () => {
const { fileList } = this.state;
const formData = new FormData();
fileList.forEach(file => {
formData.append('files[]', file);
});
this.setState({
uploading: true,
});
// You can use any AJAX library you like
fetch('https://www.mocky.io/v2/5cc8019d300000980a055e76', {
method: 'POST',
body: formData,
})
.then(res => res.json())
.then(() => {
this.setState({
fileList: [],
});
message.success('upload successfully.');
})
.catch(() => {
message.error('upload failed.');
})
.finally(() => {
this.setState({
uploading: false,
});
});
};
render() {
const { uploading, fileList } = this.state;
const props = {
onRemove: file => {
this.setState(state => {
const index = state.fileList.indexOf(file);
const newFileList = state.fileList.slice();
newFileList.splice(index, 1);
return {
fileList: newFileList,
};
});
},
beforeUpload: file => {
this.setState(state => ({
fileList: [...state.fileList, file],
}));
return false;
},
fileList,
};
return (
<>
<Upload {...props}>
<Button icon={<UploadOutlined />}>Select File</Button>
</Upload>
<Button
type="primary"
onClick={this.handleUpload}
disabled={fileList.length === 0}
loading={uploading}
style={{ marginTop: 16 }}
>
{uploading ? 'Uploading' : 'Start Upload'}
</Button>
</>
);
}
}
ReactDOM.render(<Demo />, mountNode);
```