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

 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()
      }
    },