input改造文件上传，el-table的改造，点击上传，拖拽上传，多选上传

第一个input标签效果

第二个input标签的效果

el-table的改造效果

<template> <div class="outerBox"> <div class="analyze" v-if="status"> <div class="unFile"> <div class="mainBox"> <img class="picture" src="../../static/images/upload.png" /> <div class="title">上传.log文件进行解析</div> <div class="clickBtn"> <div class='notisfyWord'>上传内容</div> <input type="file" id="fileInput" @change="handleFileChange" accept=".log" style="width:100%;height:100%;cursor: pointer;opacity:0" /></div> </div> </div> </div> <div class="fileBox" v-if="!status"> <div class="upload"> <div>上传.log文件进行解析 <input type="file" id="fileInput" @change="handleFileChange" accept=".log" style="width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;top:0;left:0;" /> </div> <div class="fileName">{{ fileName }}</div> </div> <div class="tableStyle"> <el-table :data="tableData" height="70vh" style="width: 100%" :header-row-style="{ color: 'white', }" :row-style="{ color: 'white', }" :cell-style="{ textAlign: 'center', border: '1px solid #0a1641', }" :header-cell-style="{ textAlign: 'center', background: '#222d54', border: '1px solid #222d54', }" :row-class-name="tableRowClassName" v-loading="loading" > <el-table-column prop="sourceTime" label="时间" width="180"> </el-table-column> <el-table-column prop="item" label="事项" width="150"> </el-table-column> <!-- <el-table-column prop="msg" label="描述"> </el-table-column> --> <el-table-column prop="source" label="来源" width="100"> </el-table-column> <el-table-column prop="subsystem" label="子系统"> </el-table-column> <el-table-column prop="level" label="严重等级"> </el-table-column> <el-table-column prop="value" label="值"> </el-table-column> </el-table> <!-- <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000" > </el-pagination> --> </div> </div> </div> </template> <script> export default { data() { return { loading: true, tableData: [], fileName: "", status: true, tableTotal:'', pageSize:100, midTableData: [], test:[ {item:'qqqqq',unusual:'1'}, {item:'qqqqq',unusual:'0'}, {item:'qqqqq',unusual:'0'}, {item:'qqqqq',unusual:'1'}, ] }; }, mounted() { this.tableRowClassName; }, methods: { clickBtn() { document.getElementById("fileInput").click(); }, handleFileChange(event) { const file = event.target.files[0]; const fileType = file.name.split('.').pop(); if(fileType != 'log'){ this.$message.error('请上传.log文件'); return } if(file.size > 50 * 1024){ this.$message.error('最小上传文件大小为50k'); return } this.fileName = file.name; this.status = false; // 模拟异步 setTimeout(()=>{ this.loading = false this.tableData = this.test; },2000) }, tableRowClassName({ row, rowIndex }) { if (row.unusual === '0') { return "selected-row"; } else { return "selected-rows"; } }, handleCurrentChange(val) { const start = val * 100 const end = (val + 1) * 100 }, }, }; </script> <style scoped> ::v-deep .selected-row { background-color: #e4d33d !important; } ::v-deep .selected-rows { background-color: #0a1641 !important; } .outerBox { background: linear-gradient(180deg, #eaf4ff 0%, #042f61 100%); } .analyze { width: 100%; height: 100%; padding: 0 !important; display: flex; justify-content: center; } .upload { margin-top: 10px; line-height: 40px; display: flex; justify-content: center; align-items: center; color: white; font-size: 15px; background-color: #045fcb; border-radius: 7px; margin-bottom: 10px; position: relative; cursor: pointer; } .selected-row { background-color: #e4d33d !important; } .tableStyle { width: 100%; /* background-color: #094b97; */ } .el-button { color: white !important; background: linear-gradient(180deg, #82dde1 0%, #4bb8c0 100%) !important; } .exportBtn { position: absolute; right: 10px; bottom: 10px; } .unFile { width: 50%; height: 40%; display: flex; justify-content: center; align-items: center; margin-top: 15%; background-color: #094b97; border-radius: 10px; border: 3px dashed #d4e1f3; overflow: hidden; } .picture { width: 150px; } .mainBox { display: flex; flex-direction: column; align-items: center; } .title { color: white; font-size: 15px; display: flex; justify-content: center; } .clickBtn { overflow: hidden; opacity:1; color: white; border-radius: 5px; background-color: #2188ff; width:150px; height:50px; font-size: 15px; cursor: pointer; position: relative; } .notisfyWord{ cursor: pointer; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); } .fileBox { background-color: #0a1642; padding: 10px; } .fileName { margin-left: 10px; } .pagination { display: flex; justify-content: right; } ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td { color: black !important; background-color: #0460cb !important; } ::v-deep .el-table__empty-text { color: white !important; } ::v-deep .el-table__body-wrapper { background-color: #0a1641 !important; } ::v-deep .el-table::before { background-color: #0a1642; } ::v-deep .el-table .el-table__cell.gutter { background-color: #0a1642; } </style>

input支持拖拽上传但要设置opcity为0,不能设置diaplay:none或者visiables

  如果不使用拖拽上传的话，只点击上传可使用如下

<div class="clickBtn" @click="clickBtn" > 上传内容 </div> <input type="file" id="fileInput" @change="handleFileChange" style="display: none" /> clickBtn(){ console.log("clickFackBtn"); document.getElementById('fileInput').click() }, handleFileChange(event) { const file = event.target.files[0]; console.log(file); },

input同时也支持多选文件上传<input mutilple/>