封装的子组件代码:
<template>
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body @close="handleClose">
<el-upload ref="upload" :limit="1" accept=".txt, .docx, .bpmn, .bar, .zip" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入"txt"、"docx"、“bpmn”、“bar”或“zip”格式文件!</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
name: "uploadFile",
props: {
uploadFileVisible: {
type: Boolean,
default: false
}
},
data(){
return{
// 导入文件
upload: {
// 是否显示弹出层
open: false,
// 弹出层标题
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部(这个根据自己项目变化)
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/salemanage/file/upload"
},
}
},
methods:{
/**点击导入**/
handleImport(){
// alert(this.$store.getters.permissions)
this.upload.title = "上传文件";
this.upload.open = true;
},
/** 提交上传文件**/
submitFileForm() {
this.$refs.upload.submit();
},
/** 文件上传中处理**/
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
/** 文件上传成功处理**/
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
this.handleClose()
},
/** 弹出框关闭后触发**/
handleClose () {
this.upload.open = false
// 子组件调用父组件方法,并传递参数
this.$emit('changeShow', 'false')
}
},
watch: {
/** 监听 addOrUpdateVisible 改变**/
uploadFileVisible () {
this.upload.open = this.uploadFileVisible
}
}
}
</script>
<style scoped>
</style>