<template>
|
<a-modal :title="title" :visible="visible" @cancel="handleModalClose" :maskClosable="false">
|
<a-upload :multiple="true" :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
|
<a-button type="primary">
|
<a-icon type="import"/>
|
选取文件
|
</a-button>
|
</a-upload>
|
|
<div style="margin-top: 16px">已选择{{fileList.length}}个文件</div>
|
|
<template slot="footer">
|
<a-button @click="handleModalClose">取消</a-button>
|
<a-button
|
id="custom-upload-button"
|
type="primary"
|
:disabled="fileList.length === 0"
|
:loading="uploading"
|
@click="handleUpload"
|
>
|
{{ uploading ? '上传中...' : '上传至服务器' }}
|
</a-button>
|
</template>
|
|
</a-modal>
|
</template>
|
|
<script>
|
export default {
|
name: 'ImportFileModal',
|
components: {},
|
data() {
|
return {
|
visible: false,
|
title: '',
|
fileList: [],
|
uploading: false
|
}
|
},
|
created() {
|
this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
|
this.$bus.$on('tableMenuItemMethodTrigger', this.triggerCorrespondingMethod)
|
},
|
methods: {
|
handleImport(modalTitle) {
|
this.handleModalOpen(modalTitle)
|
},
|
|
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
|
|
// You can use any AJAX library you like
|
request({
|
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.')
|
}
|
})
|
},
|
|
/**
|
* 控制文件上传窗口开启并设置窗口标题
|
* @param modalTitle 窗口标题
|
*/
|
handleModalOpen(modalTitle) {
|
this.title = modalTitle
|
this.visible = true
|
},
|
|
/**
|
* 控制文件上传窗口关闭并清空文件列表
|
*/
|
handleModalClose() {
|
this.visible = false
|
this.fileList = []
|
},
|
|
triggerCorrespondingMethod({ methodName, modalTitle }) {
|
if (this[methodName]) this[methodName](modalTitle)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
/deep/ .ant-btn-primary#custom-upload-button {
|
color: #fff;
|
background-color: #67C23A;
|
border-color: #67C23A;
|
|
&[disabled] {
|
color: rgba(0, 0, 0, 0.25);
|
background-color: #f5f5f5;
|
border-color: #d9d9d9;
|
}
|
}
|
</style>
|
