<template>
<div>
<el
-dialog
title="设备导入"
:visible.sync="dialogVisible"
width="600px"
custom
-class="ota
-dialog"
:close
-on
-click
-modal="false"
>
<div class="dialog
-content">
<!
-- 操作区域
-->
<div class="action
-section">
<div class="upload
-section">
<el
-upload
@click="handleUploadSuccess()"
:before
-upload="beforeUpload"
:limit="1"
:on
-exceed="handleExceed"
:file
-list="fileList"
:class="{ 'has
-file': fileList.length }"
drag
>
<i class="el
-icon
-upload"></i>
<div class="el
-upload__text">
<div>点击或拖拽文件到此处上传</div>
<div class="el
-upload__tip">支持.xlsx、.xls格式文件</div>
</div>
</el
-upload>
<!
-- 文件信息卡片
-->
<div v
-if="fileList.length" class="file
-card">
<div class="file
-info">
<i class="el
-icon
-document"></i>
<div class="file
-details">
<div class="file
-name">{{ fileList[0].name }}</div>
<div class="file
-size">{{ formatFileSize(fileList[0].size) }}</div>
</div>
</div>
<el
-button
type="danger"
icon="el
-icon
-delete"
circle
@click="fileList = []"
></el
-button>
</div>
</div>
</div>
</div>
<!
-- 底部按钮
-->
<div slot="footer" class="dialog
-footer">
<el
-button @click="dialogVisible = false">取 消</el
-button>
<el
-button
type="primary"
@click="otaBatchUpgradeConfirm()"
:
disabled="!fileList.length"
>
确定
</el
-button>
</div>
</el
-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
fileList: []
};
},
methods: {
init() {
this.dialogVisible = true;
this.fileList = [];
},
otaBatchUpgradeCinfirm() {
// 升级逻辑
},
handleUploadSuccess(response, file, fileList) {
this.$message.success('文件上传成功');
this.fileList = fileList;
},
beforeUpload(file) {
const isValidType = [
'application/vnd.openxmlformats
-officedocument.spreadsheetml.sheet',
'application/vnd.ms
-excel'
].includes(file.type);
if (!isValidType) {
this.$message.error('请上传Excel格式的文件 (.xlsx 或 .xls)');
}
return isValidType;
},
handleExceed() {
this.$message.warning('每次只能上传一个文件');
},
formatFileSize(size) {
if (size < 1024) return size + ' B';
if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB';
return (size / (1024 * 1024)).toFixed(1) + ' MB';
}
}
};
</script>
<style scoped>
/* 操作区域 */
.action
-section {
display: flex;
flex
-direction: column;
gap: 20px;
}
.upload
-section {
position: relative;
display: flex;
justify
-content: center;
}
/* 文件卡片 */
.file
-card {
margin
-top: 15px;
padding: 15px;
border
-radius: 8px;
background
-color: #f5f7fa;
display: flex;
align
-items: center;
justify
-content: space
-between;
border: 1px solid #ebeef5;
}
.file
-info {
display: flex;
align
-items: center;
gap: 12px;
}
.file
-info i {
font
-size: 28px;
color: #409EFF;
}
.file
-details {
line
-height: 1.5;
}
.file
-name {
font
-weight: 500;
max
-width: 300px;
overflow: hidden;
text
-overflow: ellipsis;
white
-space: nowrap;
}
.file
-size {
font
-size: 12px;
color: #909399;
}
/* 底部按钮 */
.dialog
-footer {
display: flex;
justify
-content: flex
-end;
padding
-top: 15px;
border
-top: 1px solid #ebeef5;
}
/* 上传区域激活状态 */
.has
-file >>> .el
-upload
-dragger {
border: 1px dashed #67C23A;
background
-color: rgba(103, 194, 58, 0.05);
}
</style>
读取excel 第一行第一列的数据并用 分号；隔开拼成一个字符串
博客指出在HTML中设置控件disabled属性为只读时，SpringMVC无法获取数据。因此，需在表单提交前移除disabled属性，并给出了相关表单代码和移除属性的函数示例，以确保能正常获取数据。
扫一扫
1283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
