话不多说,直接上代码:
<template>
<div style="min-height: 150px;">
<!-- 文件上传开始 -->
<div>
<el-form :model="form" ref="formEl" :rules="rulesForm">
<div class="toupload" >
<div>附件:</div>
<div v-if="showFileName">
<el-tooltip :content="fileList[0]?.name" placement="top">
<div class="file-box">
<icon-doc-detail fill="#999"></icon-doc-detail>
<span class="file-name">{{fileList[0]?.name}}</span>
<icon-delete fill="#999" @click="removeFile"></icon-delete>
</div>
</el-tooltip>
</div>
<el-upload class="upload"
:show-file-list="false"
accept=".xlsx"
:http-request="uploadFile"
:before-upload="beforeUpload"
action=""
limit="1"
:file-list="fileList"
:on-exceed="exceedFile">
<template #trigger>
<el-button type="primary">文件上传</el-button>
</template>
</el-upload>
</div>
<div style="margin-top:20px">仅支持xlsx格式,最大不超过150M。</div>
<div style="text-align:end;margin-top:50px">
<el-button size="mini" type="primary">导入</el-button>
<el-button size="mini" @click="cancel">取 消</el-button>
</div>
</el-form>
</div>
<!-- 文件上传结束 -->
</div>
</template>
<script setup>
import { ref, reactive, defineProps, defineEmits,nextTick } from 'vue';
import { ElNotification} from 'element-plus'
let fileList = ref([])
let showFileName = ref(false)
const that = reactive({
fileList: [],
file: {}
})
// 上传之前
function beforeUpload(file) {
const fileSize = file.size / 1024 / 1024 > 150
if (fileSize) {
ElNotification({
title: '警告',
message: '文件最大不超过150M!',
type: 'warning',
})
}
}
// 上传
function uploadFile(file) {
that.file = file
fileList.value = [{name:file.file.name}]
showFileName.value = true
}
// 二次上传覆盖
function exceedFile(file){
fileList.value = [{name:file[0].name}]
that.file = file
}
function change(file, fileList) {
that.file = file
}
// 删除文件
function removeFile() {
showFileName.value = false;
fileList.value = []
that.file = {}
}
// 取消
function cancel() {
emits('closeUploadDialog', false)
}
</script>