ant design因为使用的人比较多,成为了主推,但是坑很多.做了一个上传导入附加参数的导入功能,话不多说,上代码:

链接API : https://vue.ant.design/components/upload-cn/

<a-button @click="downloadTemplate()"><a-icon type="download" />模板下载</a-button>
<a-upload name="file" :multiple="true" action="/api/addBatchPriceAdjustDetails" :data="adjust" @change="handleChange" >
  <a-button><a-icon type="upload" icon="upload"/>批量导入</a-button></a-upload>
<a id="templateFile" style="visibility:hidden;" href="/templateFile/导入模板.xlsx" type="“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”">模板下载</a>

data () {
  return {
    adjust: {
      out_id: 0
    }}

methods: {
//recored为其他页面跳转到该页面带过来的参数
  refreshTable (record) {
    this.adjust.out_id = record.id,
.....
......  其他定义的方法

downloadTemplate () {
  document.querySelector('#templateFile').click()
         },......该初是指,页面存在下载模板按钮,找到该文件,触发下载模板功能.
             注意:文件一定要放在公共包处,否则找不到!!!

handleChange (info) {
  if (info.file.status === 'done') {
    if (info.file.response.state === 'success') {
      this.$confirm({
        title: '提示',
        content: info.file.response.msg,
        onOk () {}
      })
      this.refreshTable(this.defaultRecord)
    } else {
      this.$confirm({
        title: '导入失败',
        content: info.file.response.msg,
        onOk () {}
      })
      this.refreshTable(this.defaultRecord)
          }
       }
    }
  }
}

后台代码

@Transactional
public Map<String, String> import(MultipartFile ifile, String  out_id) throws Exception {


    ............................
    return map
}