element-ui-——el-uploadexcel导入

布局文件：（选择文件放在了弹框内部——即点击导入按钮后弹框显示，先下载模板再选择文件点击提交按钮才上传）

<div class="emImport_container">
  <el-dialog :title="meta.title" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
    <el-upload
      :ref="system_id"
      v-loading="uploadLoading"
      class="upload-demo"
      :action="action"  （action: 导入文件的url地址）
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :headers="headers" (headers: 请求头)
      name="file" (文件名)
      accept=".xlsx "
      :on-error="uploadFileError"
      :on-success="uploadFileSuccess"
      :auto-upload="false"
      :http-request="uploadFile"
      :on-change="fileChange"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="downloadModel">下载模板</el-button>
      <div slot="tip" class="el-upload__tip">请先下载模板，再选择文件上传！</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button class="em-button" @click="cancelUpload">取 消</el-button>
      <el-button type="primary" class="em-button" @click="submitUpload">提交</el-button>
    </div>
  </el-dialog>
</div>

模板下载及文件导入：

<script>
import vueBus from '@/utils/vueBus'
import { emMixin } from '@/utils/mixins'
import { dataInitFn, childrenInitFn } from '@/utils/tool'
import { uploadFile } from '@/api/schoolService/parentInfo'
export default {
  name: 'EmImport',
  mixins: [emMixin],
  data() {
    return {
      set: {
        downloadUrl: '', // 模板下载url地址
        importUrl: ''// 导入文件url地址
      },
      fileList: [], // 文件列表
      dialogFormVisible: false,
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      uploadLoading: '',
      action: '',
      files: [] // 选择文件
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.set = dataInitFn(this.set, this.meta)
      this.children = childrenInitFn(this.children, this.componentData)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    uploadFileError(err, file, fileList) {
      console.log(err)
      this.$message.error('文件导入失败')
    },
    uploadFileSuccess(response, file, fileList) {
      console.log(response.data.jsonmsg.ERRORMSG)
      if (response.data.jsonmsg.ERRORMSG === '') {
        this.$message({
          message: '恭喜你，导入成功',
          type: 'success'
        })
        this.init()
        this.dialogFormVisible = false
      } else {
        this.$message({
          message: response.data.jsonmsg.ERRORMSG.slice(response.data.jsonmsg.ERRORMSG.indexOf('=') + 1),
          type: 'error'
        })
      }
    },
    downloadModel() { // 下载导出需要的模板
      window.location.href = process.env.VUE_APP_BASE_API + this.set.downloadUrl  // process.env.VUE_APP_BASE_API :基础地址（env.development文件中的 base api地址
）

    },
    // 导入csv
    import() {
      this.dialogFormVisible = true
      this.action = process.env.VUE_APP_BASE_API + this.set.importUrl  // 尤为重要，否则action是没有值的
    },
    fileChange(file) {
      this.files.push(file.raw) // 上传文件变化时将文件对象push进files数组
    },
    // 上传文件
    uploadFile(params) {
      if (this.files) {
        const formData = new FormData() // new一个formData对象
        this.files = params.file  （这里一定是params.file,传递给后台的应是file:(binary)； 不是this.files,,否则传递给后台的是file:Undefined）
        formData.append('file', this.files)
        uploadFile({
          url: process.env.VUE_APP_BASE_API + this.set.importUrl, //导入文件地址
          params: formData  （参数必须是formData）
        }).then(response => {
          console.log('导入结果', response)
          if (response.statusCode === 200) {
            this.$notify({
              message: '数据导入成功',
              type: 'success'
            })
            this.dialogFormVisible = false
            vueBus.$emit('query')
          } else {
            this.$notify.error('数据导入失败')
          }
        })
      }
    },
    submitUpload(event) {
      this.$refs[this.system_id].submit() // 提交按钮
    },
    cancelUpload() {
      this.dialogFormVisible = false
      this.$message.info('已取消上传')
    }
  }
}
</script>

接口地址：

export function uploadFile(obj) {
  return request({
    url: obj.url,
    method: 'post',
    data: obj.params
  })
}

总结：请求头格式一定是：content-Type:multipart/form-data;  否则导入会失败；传递的参数：params一定是formData(表单对象)