el-upload 带上请求后台

<template>
  <div class="div-card-body">
    <el-form inline>
      <el-form-item>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          @click="showUploadDialog">导入结算数据
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      fit
      highlight-current-row
    >
      <el-table-column
        v-for="column in columns"
        :label="column.title"
        :min-width="column.minWidth ? column.minWidth : 75"
        :width="column.width"
        :key="column.key"
        :prop="column.key"
        :formatter="column.formatter"
        align="center"
      />
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-show="total > 0"
        :current-page="listQuery.current"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.size"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>

    <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" title="上传结算数据" width="700px">
      <el-form >
        <el-form-item label="上传文件" >
          <el-upload
            ref="upload"
            :action="uploadUrl"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :on-error="handleError"
            :headers="uploadHeader"
            :auto-upload="false"
            multiple
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,.csv,text/plain">
            <el-button size="small" plain>选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>

<script>
import * as statisticsApi from '@/api/common/statistics'
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import waves from '@/directive/waves' // 水波纹指令
import { getToken } from '@/utils/auth'
import { getJwtHeader } from '@/utils/jwtToken'
import { Message } from 'element-ui'

export default {
  name: 'StaticValueAdmin',
  directives: {
    waves,
    elDragDialog
  },
  filters: {},
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        pagesize: 10,
        advertiserName: undefined
      },
      dialogFormVisible: false,
      columns: [
        { key: 'settlementDate', title: '结算日期' },
        { key: 'advertiserId', title: '广告主id' },
        { key: 'advertiserName', title: '广告主名称' },
        { key: 'productId', title: '产品ID' },
        { key: 'productName', title: '产品名称' },
        { key: 'attributeId', title: '归因ID' },
        { key: 'attributeName', title: '归因名称' },
        { key: 'active', title: '激活量' },
        { key: 'awake', title: '唤醒量' },
        { key: 'conversion', title: '结算转化数' },
        { key: 'price', title: '结算单价' },
        { key: 'revenue', title: '结算收入' }
      ],
      defaultTemp: {
        seqNum: undefined,
        valueSetName: undefined,
        valueSetType: undefined,
        textValue: undefined,
        valueDesc: undefined
      },
      uploadUrl: '/statistics/settlement/upload',
      uploadHeader: {
        Authorization: getJwtHeader(getToken())
      }

    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      statisticsApi.getDataPage(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        // Just to simulate the time of the request
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleSuccess(res, file) {
      console.log('-handleSuccess---')
    },
    beforeUpload(file) {
      console.log('-beforeUpload---')
    },
    handleError(err) {
      console.log('-handleError---', err)
      Message({
        message: '文件上传失败',
        type: 'error',
        duration: 5 * 1000
      })
    },
    uploadFile(params) {
      this.$refs.upload.submit()
    },
    showUploadDialog() {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['upload'].clearFiles()
      })
    }
  }
}
</script>

带上header