vue3+element-plus 组件功能实现 上传功能

一、整体功能概述
这段代码实现了一个基于 Vue 3 和 Element Plus 组件库的文件导入及预览功能模块。主要包含了一个主导入对话框（用于上传文件、展示文件相关信息、进行导入操作等）以及一个用于预览文件内容的预览对话框。支持导入特定格式（.xlsx、.csv）且大小不超过 10M 的文件，能展示导入数据的统计情况并提供预览功能，方便用户在正式导入前查看文件内容。
二、模板结构分析
部分
主导入对话框（el-dialog）：
标题为 “导入”，通过v-model绑定dialogVisible控制显示隐藏，设置了固定宽度且禁止点击模态框关闭。
内部包含文件上传区域（el-upload组件），可拖放文件，限制了文件类型、自动上传行为等，在文件改变时触发handleFileChange方法。
展示了文件类型提示、下载模板提示及链接（点击调用handleDownloadTemplate方法）。
根据是否有上传文件以及上传进度等情况，动态展示文件预览相关信息、导入数据统计情况等内容。
对话框底部定义了 “取消” 和 “确定” 按钮，“确定” 按钮根据上传进度和文件列表情况控制是否可用，点击分别调用handleClose和handleSubmit方法。
预览对话框（el-dialog）：
通过v-model绑定previewVisible控制显示隐藏，设置了标题、宽度、自定义模态框类等属性。
根据importResult.fileText的值（如’attr’或’alarm’），使用不同的el-table结构来展示预览数据，数据来源于previewData。
对话框底部有 “返回” 按钮，点击调用handlePreviewClose方法关闭预览对话框。

父页面

importVisible：一个ref类型的响应式变量，用于控制导入弹窗的显示与隐藏，初始值为false，当用户点击 “导入” 按钮时，会将其设置为true以显示导入弹窗。
file：同样是ref类型变量，用于存储用户选择要上传的文件对象，在后续的文件上传等操作中会使用到该文件。
importDialogRef：ref类型，用于获取导入对话框组件的引用，方便后续调用组件内的方法来更新导入结果等相关操作。
pre_import：ref类型，作为一个标志位，在文件预览等操作流程中起到控制作用，初始值为false，在特定逻辑中会被修改其值。
三、主要函数分析
handleImport函数
javascript
const handleImport = async () => {
try {
importVisible.value = true;
} catch (error) {
console.error(‘导入组件加载失败:’, error);
ElMessage.error(‘导入功能加载失败，请刷新页面重试’);
}
};
这个函数是用户点击 “导入” 按钮时触发的操作。它的主要目的是尝试显示导入弹窗，即将importVisible的值设为true。如果在这个过程中出现错误（比如导入组件加载异常），会在控制台打印错误信息，并通过ElMessage组件向用户提示导入功能加载失败，让用户刷新页面重试。
handleDownloadTemplate函数
javascript
const handleDownloadTemplate = async () => {
const res = await DeviceModelApi.downloadAlarmTemplate();
const blob = new Blob([res.data], {
type: ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet’
});
const filename = 告警知识库导入模板_${new Date().getTime()}.xlsx;
const url = window.URL.createObjectURL(blob);
downloadFile(url, filename);

ElMessage.success(‘下载成功’);
};
此函数用于处理下载导入模板的操作。它首先调用后端DeviceModelApi的downloadAlarmTemplate方法获取模板数据，将返回的数据包装成Blob对象，设置好对应的文件类型（适用于 Excel 文件格式）。接着生成一个唯一的文件名（包含当前时间戳），创建一个临时的 URL 对象，然后通过downloadFile函数实现文件下载，最后向用户提示下载成功的消息。
handleFileUpload函数
javascript
const handleFileUpload = async (uploadFile) => {
file.value = uploadFile;
try {
const formData = new FormData();
formData.append(‘file’, uploadFile);
formData.append(‘clear_existing’, ‘true’);
formData.append(‘thing_model_id’, props.detailId);
formData.append(‘pre_import’, pre_import.value);

const res = await DeviceModelApi.importAlarms(formData);let str = res.data.msg || '';
const successCount = Number(str.match(/成功导入(\d+)条/)?.[1] || 0);
const failCount = Number(str.match(/失败(\d+)条/)?.[1] || 0);
const totalCount = successCount + failCount;let errorList = [];
if (failCount > 0) {errorList = res.data.data.error;
}// 更新导入对话框的数据
importDialogRef.value?.updateImportResult({totalCount,successCount: Number(successCount),failCount: Number(failCount),errorList,fileText: 'alarm'
});

} catch (error) {
ElMessage.error(error.response?.data?.msg || error.message || ‘上传失败’);
}
};
该函数负责实际的文件上传操作，接收用户选择的文件对象作为参数。首先将传入的文件对象赋值给file.value以便后续使用。然后创建一个FormData对象，将文件以及其他相关参数（如是否清除现有数据、关联的模型 ID、预导入标志等）添加进去。接着调用后端DeviceModelApi的importAlarms方法进行文件上传，并处理返回结果：从返回消息中解析出成功导入和失败的记录数量，根据失败数量获取错误列表（如果有），最后通过导入对话框组件的引用调用updateImportResult方法更新导入对话框中显示的导入结果信息，包括总数、成功数、失败数、错误列表以及文件类型标识等内容。若上传过程出现错误，则向用户提示相应的错误消息。
handlePreview函数
javascript
const handlePreview = () => {
if (file.value) {
pre_import.value = true;
handleFileUpload(file.value)
.then(() => {
// 当handleFileUpload执行成功（Promise状态变为resolved）后，调用fetchList
return fetchList();
})
.catch((error) => {
ElMessage.error(error.response?.data?.msg || error.message || ‘文件上传或数据获取失败’);
});
}
};

这个函数用于文件预览功能。它首先判断是否已经选择了文件（即file.value是否有值），如果有文件，则将pre_import的值设为true，接着调用handleFileUpload函数进行文件上传操作。当handleFileUpload执行成功（Promise 状态变为resolved）后，会继续调用fetchList函数来获取相关数据（可能是用于展示预览内容的数据）。如果在整个过程中出现错误（文件上传或者获取数据失败），会通过ElMessage向用户提示相应的错误信息。

<ImportDialogref="importDialogRef"v-model:visible="importVisible"@success="handleSearch"@download-template="handleDownloadTemplate"@submit="handleFileUpload"@preview="handlePreview"
/>

<template><el-dialogtitle="导入"v-model="dialogVisible"width="600px":close-on-click-modal="false"@close="handleClose"><div class="upload-area"><el-uploadclass="upload-dragger"dragaction="#":auto-upload="false":show-file-list="false"accept=".xlsx,.csv":on-change="handleFileChange"><div class="upload-content"><el-icon class="upload-icon" :size="80"><upload-filled /></el-icon><div class="upload-text"><p>把文件拖放到此处或 <span class="upload-link">重新上传</span></p></div></div></el-upload></div><p class="file-type-tip text-left">支持扩展名：.xlsx、.csv，文件大小不超过10M</p><div class="download-tip text-left">下载导入模板，根据模板提示完善内容<el-link type="primary" @click="handleDownloadTemplate">下载模板</el-link></div><div v-if="fileList.length" class="file-preview"><div class="file-item"><div class="file-info"><div class="file-icon-wrapper"><span class="file-type-text">csv</span></div><span class="file-name">{{ fileList[0].name }}</span><div class="file-actions"><el-icon v-if="uploadProgress === 100" class="success-icon" :size="24" color="#67C23A"><circle-check/></el-icon><el-linkclass="preview-link"type="primary"v-if="uploadProgress === 100"@click="handlePreview">文件预览</el-link></div></div><el-progress :percentage="uploadProgress" :show-text="false" class="upload-progress" /><div class="import-info" v-if="uploadProgress === 100"><p>共导入数据{{ importResult.totalCount }}条数据...</p><p v-if="importResult.failCount > 0" class="error-text">错误数据{{ importResult.failCount }}条...错误数据将无法导入！</p><p v-if="importResult.successCount > 0">是否将本次 {{ importResult.successCount }} 条有效数据导入？</p><p v-if="importResult.successCount == 0">本次0条有效数据，无有效数据无法导入，请重新上传文件！</p></div></div></div><template #footer><div class="dialog-footer"><el-button @click="handleClose">取消</el-button><el-buttontype="primary"@click="handleSubmit":disabled="uploadProgress === 100 && fileList.length ? false : true">确定</el-button></div></template></el-dialog><!-- 预览弹窗 --><el-dialogv-model="previewVisible"title="文件预览"width="80%":modal-class="'preview-dialog'":close-on-click-modal="false":before-close="handlePreviewClose"append-to-body><div class="preview-content"><template v-if="importResult.fileText == 'attr'"><el-table:header-cell-style="{backgroundColor: '#F2F3F5',fontSize: '14px'}":data="previewData"height="calc(100vh - 200px)"style="width: 100%"><el-table-column prop="identifier" label="属性标识" width="180"></el-table-column><el-table-column prop="name" label="属性名称" width="180"></el-table-column><el-table-column prop="data_type" label="数据类型" width="180"><template #default="{ row }"><span>{{{int: '整数',float: '浮点数',string: '字符串',bool: '布尔值',enum: '枚举'}[row.data_type]}}</span></template></el-table-column><el-table-column prop="unit" label="单位" width="180"><template #default="{ row }"><span>{{ ['int', 'float'].includes(row.data_type) ? row.unit || '' : '-' }}</span></template></el-table-column><el-table-column prop="precision" label="精度" width="180"><template #default="{ row }"><span>{{row.data_type === 'float'? row.precision? `小数点后${row.precision}位`: '': '-'}}</span></template></el-table-column><el-table-column prop="data_source" label="数据来源" width="180"><template #default="{ row }"><span>{{{gateway: '数采网关',rule_engine: '规则引擎'}[row.data_source]}}</span></template></el-table-column><el-table-column prop="rw_permission" label="读写权限" width="180"><template #default="{ row }"><span>{{{r: '只读',w: '只写',rw: '读写'}[row.rw_permission]}}</span></template></el-table-column><el-table-column prop="description" label="属性描述" width="180"></el-table-column><el-table-column label="错误类型" width="180"><template #default="scope"><span v-if="scope.row.error && scope.row.error.length > 0">{{scope.row.error[0].error}}</span><span v-else>无错误</span></template></el-table-column></el-table></template><template v-if="importResult.fileText == 'alarm'"><el-table:header-cell-style="{backgroundColor: '#F2F3F5',fontSize: '14px'}":data="previewData"height="calc(100vh - 200px)"style="width: 100%"><el-table-column prop="identifier" label="告警编码" ></el-table-column><el-table-column prop="name" label="告警信息" ></el-table-column><el-table-column prop="physical_name" label="关联部位" ></el-table-column><el-table-column label="错误类型"><template #default="scope"><span v-if="scope.row.error && scope.row.error.length > 0">{{scope.row.error[0].error}}</span><span v-else>无错误</span></template></el-table-column></el-table></template></div><template #footer><div class="preview-footer"><el-button @click="handlePreviewClose">返回</el-button></div></template></el-dialog>
</template><script setup>
import { ref, watch } from 'vue'
import { Upload, CircleCheck } from '@element-plus/icons-vue'const props = defineProps({visible: {type: Boolean,default: false}
})const importResult = ref({totalCount: 0,successCount: 0,failCount: 0,errorList: [],fileText: ''
})
// 更新导入结果
const updateImportResult = (result) => {importResult.value = result// 当获取到导入结果时，将进度条设置为 100%uploadProgress.value = 100
}
// 暴露方法给父组件
defineExpose({updateImportResult
})const emit = defineEmits(['update:visible', 'success', 'download-template', 'submit', 'preview'])const dialogVisible = ref(false)
const fileList = ref([])// 监听弹窗显示状态
watch(() => props.visible,(val) => {dialogVisible.value = val},{ immediate: true } // 添加 immediate 选项确保首次渲染时同步状态
)const uploadProgress = ref(0)// 文件变化
const handleFileChange = (file) => {// 检查文件大小const isLt10M = file.size / 1024 / 1024 < 10if (!isLt10M) {ElMessage.error('文件大小不能超过 10MB!')return}fileList.value = [file]uploadProgress.value = 0// 模拟上传进度到 90%const timer = setInterval(() => {if (uploadProgress.value < 90) {uploadProgress.value += 10} else {clearInterval(timer)// 触发父组件的事件，传递原始文件对象emit('submit', file.raw)}}, 500)
}// 移除文件
const handleRemoveFile = (index) => {fileList.value.splice(index, 1)
}// 下载模板
const handleDownloadTemplate = () => {emit('download-template')
}// 关闭弹窗
const handleClose = () => {emit('update:visible', false)fileList.value = []uploadProgress.value = 0importResult.value = {totalCount: 0,successCount: 0,failCount: 0,errorList: [],fileText: ''}// emit('')
}// 提交
const handleSubmit = () => {emit('preview')handleClose()
}// 预览相关
const previewVisible = ref(false)
const previewData = ref([])// 预览方法
const handlePreview = async () => {if (importResult.value.failCount == 0) returntry {let data = importResult.value.errorListlet tableData = data.map((item) => ({...item.row,error: item.error}))previewData.value = tableDatapreviewVisible.value = true} catch (error) {ElMessage.error('文件预览失败')}
}
// 关闭预览弹窗
const handlePreviewClose = () => {previewVisible.value = false
}
</script><style scoped lang="scss">
.upload-area {border: 1px dashed #dcdfe6;border-radius: 6px;text-align: center;.upload-dragger {:deep(.el-upload) {width: 100%;}:deep(.el-upload-dragger) {width: 100%;height: auto;border: none;}}.upload-content {display: flex;flex-direction: column;align-items: center;:deep(.upload-icon) {color: #c0c4cc;margin-bottom: 24px;svg {width: 80px;height: 80px;}}.upload-text {color: #606266;font-size: 14px;.upload-link {color: #409eff;cursor: pointer;}.upload-tip {font-size: 12px;color: #909399;margin-top: 12px;}}}
}.text-left {text-align: left;
}.file-type-tip {margin-top: 12px;font-size: 14px;color: #909399;
}.download-tip {margin-top: 16px;font-size: 14px;color: #606266;
}.file-preview {margin-top: 20px;padding: 16px;.file-item {.upload-progress {:deep(.el-progress-bar__outer) {background-color: #e9ecef;height: 4px !important;border-radius: 2px;}:deep(.el-progress-bar__inner) {transition: width 0.3s ease;border-radius: 2px;background-color: #409eff;}:deep(.el-progress__text) {font-size: 13px;color: #606266;}}.file-info {display: flex;align-items: center;gap: 12px;background: #f5f7fa;padding: 12px;border-radius: 4px;.file-icon-wrapper {display: flex;align-items: center;gap: 4px;background: #409eff;padding: 4px 8px;border-radius: 4px;color: white;.file-type-icon {font-size: 16px;}.file-type-text {font-size: 12px;text-transform: uppercase;}}.file-name {flex: 1;font-size: 14px;color: #606266;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.file-actions {display: flex;align-items: center;gap: 12px;.success-icon {color: #67c23a;}.preview-link {font-size: 14px;color: #409eff;text-decoration: none;&:hover {opacity: 0.8;}}}}.import-info {margin-top: 10px;font-size: 14px;color: #606266;line-height: 1.8;.error-text {color: #f56c6c;}}}
}.dialog-footer {display: flex;justify-content: flex-end;gap: 12px;
}.preview-dialog-container {:deep(.el-dialog) {position: fixed;top: 50% !important;left: 50% !important;transform: translate(-50%, -50%);margin: 0 !important;height: 100vh;max-height: 100vh;display: flex;flex-direction: column;}:deep(.el-dialog__body) {flex: 1;overflow: hidden;padding: 10px;}:deep(.el-dialog__footer) {padding: 10px 20px;border-width: 1px 0px 0px 0px;border-style: solid;border-color: #e5e6eb;}
}.preview-content {height: 100%;
}.preview-footer {text-align: right;
}
</style>