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

86 lines
1.8 KiB
Markdown
Raw Normal View History

2018-04-13 16:19:50 +08:00
<cn>
#### 手动上传
`beforeUpload` 返回 `false` 后,手动上传文件。
</cn>
<us>
#### Upload manually
Upload files manually after `beforeUpload` returns `false`.
</us>
```html
<template>
<div class="clearfix">
<a-upload
:fileList="fileList"
:remove="handleRemove"
2018-04-13 16:19:50 +08:00
:beforeUpload="beforeUpload"
>
<a-button>
<a-icon type="upload" /> Select File
</a-button>
</a-upload>
<a-button
type="primary"
@click="handleUpload"
:disabled="fileList.length === 0"
:loading="uploading"
2018-12-13 21:26:21 +08:00
style="margin-top: 16px"
2018-04-13 16:19:50 +08:00
>
{{uploading ? 'Uploading' : 'Start Upload' }}
</a-button>
</div>
</template>
<script>
import reqwest from 'reqwest'
export default {
data () {
return {
fileList: [],
uploading: false,
}
},
methods: {
2018-07-02 16:24:19 +08:00
handleRemove(file) {
2018-04-13 16:19:50 +08:00
const index = this.fileList.indexOf(file);
const newFileList = this.fileList.slice();
newFileList.splice(index, 1);
this.fileList = newFileList
},
beforeUpload(file) {
this.fileList = [...this.fileList, file]
return false;
},
handleUpload() {
const { fileList } = this;
const formData = new FormData();
fileList.forEach((file) => {
formData.append('files[]', file);
});
this.uploading = true
// You can use any AJAX library you like
reqwest({
url: '//jsonplaceholder.typicode.com/posts/',
method: 'post',
processData: false,
data: formData,
success: () => {
this.fileList = []
this.uploading = false
this.$message.success('upload successfully.');
},
error: () => {
this.uploading = false
this.$message.error('upload failed.');
},
});
}
},
}
</script>
```