导入excel 文件上传

elementui导入文件,文件上传

.vue 

弹框

 <el-dialog title="导入结算账单" :visible.sync="dialogTableVisible" width="300px">
    <el-upload
      class="upload-demo"
      :headers="uploadHeader"
      action="/admin/scfBill/upload"
      :before-remove="beforeRemove"
      :on-success="uploadSuccess"
      :limit="1"
      accept=".xlsx"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
    </el-upload>
      <el-dialog type="warning" title="导入失败原因" width="30%" :lock-scroll="false" :visible.sync="innerVisible" center append-to-body>
        <div style="height: 100px;overflow-y:scroll;">
          <span v-for="(item, index) in errorMsg" :key="index">{{ item }}<br /></span>
        </div>
      </el-dialog>
    </el-dialog>

js

import FileSaver from "file-saver";
import XLSX from "xlsx";
   fileList: [],
      uploadHeader: {
        token: '',
        userId: ''
      },
      errorMsg: [],
      dialogTableVisible:false,
      innerVisible:false,
 
 mounted() {
   //根据自己的场景需要获取token
    if (localStorage.getItem('token')) {
      this.uploadHeader.token = localStorage.getItem('token')
      this.uploadHeader.userId = localStorage.getItem('userId')
    }
}

  

   
uploadExcel() {
this.dialogTableVisible = true }, beforeRemove(file, fileList) { console.log(fileList) return this.$confirm(`确定移除 ${file.name}?`) }, uploadSuccess(response, file, fileList) { console.log(response, file, fileList) if (response.code != 200) { this.innerVisible = true if (response.msg == undefined) { this.$message({ message: '导入失败!', type: 'warning' }) } this.errorMsg = response.msg.split(';') this.fileList = [] } else { this.dialogTableVisible = false this.$message({ message: '上传成功!', type: 'success', onClose: function() {} }) this.fileList = [] this.initList() } },
原文地址:https://www.cnblogs.com/shuihanxiao/p/13610380.html