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

第一个input标签效果

第二个input标签的效果

el-table的改造效果

  

    

      

        

          
          
上传.log文件进行解析
          

            
上传内容
            

        
      
    
    

      

        
上传.log文件进行解析
          
        
        
{{ fileName }}
      

      

        
          
          
          
          
          
          
          
           
           
           
        
        
      
    
  



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
    },
  },
};



::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 #d4e1f服务器托管网3;
  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;
}

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

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

          

            上传内容
          
          

    clickBtn(){
      console.log("clickFackBtn");
      document.getElementById('fileInput').click()
    },

服务器托管网    handleFileChange(event) {
      const file = event.target.files[0];
      console.log(file);
    },

input同时也支持多选文件上传

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Centos 7分区失败，进入 dracut 页面，恢复操作

1. 问题场景： 分区失败，重启了虚拟机，导致系统进入 dracut 页面。开机显示 直接回车，等待重启失败的页面 自动进入了 dracut 模式(救援)。 2. 临时解决进入系统 查了一下：如果出现 “dracut” 提示、进入 dracut 模式或者 dr…