2018-04-13 16:19:50 +08:00
|
|
|
<cn>
|
|
|
|
#### 手动上传
|
|
|
|
`beforeUpload` 返回 `false` 后,手动上传文件。
|
|
|
|
</cn>
|
|
|
|
|
|
|
|
<us>
|
|
|
|
#### Upload manually
|
|
|
|
Upload files manually after `beforeUpload` returns `false`.
|
|
|
|
</us>
|
|
|
|
|
2019-10-09 18:32:23 +08:00
|
|
|
```tpl
|
2018-04-13 16:19:50 +08:00
|
|
|
<template>
|
|
|
|
<div class="clearfix">
|
2019-09-28 20:45:07 +08:00
|
|
|
<a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload">
|
|
|
|
<a-button> <a-icon type="upload" /> Select File </a-button>
|
2018-04-13 16:19:50 +08:00
|
|
|
</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>
|
2019-09-28 20:45:07 +08:00
|
|
|
import reqwest from 'reqwest';
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
fileList: [],
|
|
|
|
uploading: false,
|
|
|
|
};
|
2018-04-13 16:19:50 +08:00
|
|
|
},
|
2019-09-28 20:45:07 +08:00
|
|
|
methods: {
|
|
|
|
handleRemove(file) {
|
|
|
|
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;
|
2018-04-13 16:19:50 +08:00
|
|
|
|
2019-09-28 20:45:07 +08:00
|
|
|
// You can use any AJAX library you like
|
|
|
|
reqwest({
|
|
|
|
url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
|
|
|
|
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.');
|
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
2018-04-13 16:19:50 +08:00
|
|
|
</script>
|
|
|
|
```
|