<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
action="#"
:auto
-upload="false"
:before
-upload="beforeUpload"
:on
-change="handleFileChange"
:limit="1"
:on
-exceed="handleExceed"
:file
-list="fileList"
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 v
-if="firstRowString" class="file
-data">
<el
-tooltip effect="dark"
:content="firstRowString" placement="top">
<span>首行数据
: {{ truncateString(firstRowString) }}</span>
</el
-tooltip>
</div>
</div>
</div>
<div class="file
-actions">
<i v
-if="loading" class="el
-icon
-loading"></i>
<el
-button
v
-else
type="danger"
icon="el
-icon
-delete"
circle
@click="clearFile"
></el
-button>
</div>
</div>
</div>
</div>
</div>
<div slot="footer" class="dialog
-footer">
<el
-button @click="dialogVisible = false">取 消</el
-button>
<el
-button
type="primary"
@click="handleConfirm"
:disabled="!fileList.length || loading"
>
{{ loading ? '处理中...'
: '确 定' }}
</el
-button>
</div>
</el
-dialog>
</div>
</template>
<script>
import * as XLSX from 'xlsx';
export default {
data() {
return {
dialogVisible
: false,
fileList
: [],
firstRowString
: '',
loading
: false
};
},
methods
: {
init() {
this.dialogVisible = true;
this.fileList = [];
this.firstRowString = '';
},
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;
},
// 处理文件选择变化
handleFileChange(file) {
if (!file) return;
const validTypes = [
'application/vnd.ms
-excel', // .xls
'application/vnd.openxmlformats
-officedocument.spreadsheetml.sheet' // .xlsx
];
if (!validTypes.includes(file.raw.type)) {
this.$message.error('请上传Excel格式的文件 (.xlsx 或 .xls)');
this.clearFile();
return;
}
this.fileList = [file];
this.readExcelFirstRow(file.raw);
},
// 读取Excel文件第一行
readExcelFirstRow(file) {
this.loading = true;
const reader = new FileReader();
reader.onload = (e) => {
try {
const data = new Uint
8Array(e.target.result);
const workbook = XLSX.read(data, { type
: 'array' });
// 获取第一个工作表
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
// 获取第一行数据
const range = XLSX.utils.decode_range(worksheet['!ref']);
const firstRow = [];
// 遍历第一行的所有列
for (let col = range.s.c; col <= range.e.c; col++) {
const cellAddress = XLSX.utils.encode_cell({ r
: 0, c
: col });
const cell = worksheet[cellAddress];
firstRow.push(cell ? cell.v
: '');
}
// 用分号拼接第一行数据
this.firstRowString = firstRow.join(';');
this.$message.success('Excel文件解析成功');
} catch (error) {
console.error('Excel解析错误
:', error);
this.$message.error('Excel文件解析失败，请检查文件格式');
this.firstRowString = '';
} finally {
this.loading = false;
}
};
reader.onerror = () => {
this.$message.error('文件读取失败');
this.loading = false;
};
reader.readAsArrayBuffer(file);
},
// 处理确认操作
handleConfirm() {
if (!this.firstRowString) {
this.$message.warning('未解析到有效数据');
return;
}
this.$message.success(`已获取首行数据
: ${this.firstRowString}`);
// 这里可以添加将数据发送到服务器的逻辑
// this.otaBatchUpgradeConfirm(this.firstRowString);
// 关闭对话框
this.dialogVisible = false;
},
// 清空文件
clearFile() {
this.fileList = [];
this.firstRowString = '';
},
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';
},
// 截断长字符串
truncateString(str, maxLength = 30) {
if (str.length <= maxLength) return str;
return str.substring(0, maxLength) + '...';
}
}
};
</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;
flex
: 1;
}
.file
-info i {
font
-size
: 2
8px;
color
: #409EFF;
}
.file
-details {
line
-height
: 1.5;
flex
: 1;
}
.file
-name {
font
-weight
: 500;
max
-width
: 300px;
overflow: hidden;
text-overflow: ellipsis;
white
-space
: nowrap;
}
.file
-size {
font
-size
: 12px;
color
: #909399;
}
.file
-data {
font
-size
: 12px;
color
: #67C23A;
margin
-top
: 5px;
max
-width
: 300px;
overflow: hidden;
text-overflow: ellipsis;
white
-space
: nowrap;
}
.file
-actions {
margin
-left
: 10px;
}
.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, 5
8, 0.05);
}
.el
-icon
-loading {
font
-size
: 20px;
color
: #409EFF;
margin
-right: 10px;
}
</style>
上传文件后布局混乱
本文介绍如何使用CSS属性text-overflow实现文本溢出时显示省略号，并解决在IE8浏览器中出现的问题。当结合text-align:right样式时，省略号可能会被覆盖，通过添加text-indent可以有效避免该问题。
扫一扫
2381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
