vue点击组件弹出窗口

 <span class="tool-btn" @click="opendialog()"> <i class="table-tool-btn add-icon"></i> 批量新增 </span>

在方法中定义一个控制器

export default {data(){
return{
 files:[],
 open:false,
}
},
  methods: {
 opendialog() {
      this.open = true;
    },
} 
},

vue页面弹框组件标签

<el-dialog :title="titleoil" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="请选择excel文件路径" label-width="150px">
          <el-upload
              class="upload-demo"
              ref="upload"
              accept=".mpp,.xls,.xlsx"
              :auto-upload="false"
              :on-change="onUploadChange"
              :action="url"
               multiple
              :limit="3"
              :file-list="files"
             >
            <el-button size="small" type="primary" style="margin-left: 10px">点击上传</el-button>
            <!--  :file-list="oilCardInfoExcelUpload"-->
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpload" >确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

点击上传后改变状态方法获得上传文件的file对象并赋值给全局变量files

    onUploadChange(file)
   {
     this.files=file
     this.resuleFile=file
    const isIMAGE = (file.raw.type === 'application/vnd.ms-excel');
    if (!isIMAGE) {
      this.$message.error('上传文件只能是.xls格式!');
      return false;
    }
     console.log("---file----->"+file)//
     var reader = new FileReader();
     reader.readAsDataURL(file.raw);
     reader.onload = function(e){
       //console.log("-------->"+this.result)//
     }

  },

点击提交的时候调用该方法

submitUpload()
    {
      console.log("submitUpload-------->"+this.files)//
      let formData = new FormData();
      formData.append('oilCardInfoExcel', this.files.raw)
      this.$http.post('/VehicleManagement/upload/oilCardInfoUpload', formData).then(res => {
        //返回批量插入成功信息
        this.$message.success("批量插入油卡费用成功")
      }).catch(
          res => {
            //返回批量插入成功信息
            this.$message.error("批量插入油卡费用失败")
          }
      )
      //关闭窗口
      this.open = false;
      this.reset();
    },

下面是后端接口代码展示：

@Autowired
	private IOilCardInfoExcelService oilCardInfoExcelService;

	@ApiOperation(value = "Excel模板文件上传运营车辆油卡信息", notes = "运营车辆油卡信息上传")
	@PostMapping(value = "/oilCardInfoUpload")
	public ResultEntity oilCardInfoUpload(
			@RequestPart(value = "oilCardInfoExcel", required = false)MultipartFile oilCardInfoExcel) {
		InputStream is=null;
		//@RequestPart
		
		if (oilCardInfoExcel.isEmpty()) {
			return new ResultEntity(ResultStatus.ERROR, ResultConstants.NO_DATA);
		} else {
			String name = oilCardInfoExcel.getOriginalFilename();
			if(!(name.endsWith(".xls")||name.endsWith(".xlsx"))) {
				return new ResultEntity(ResultStatus.ERROR, ResultConstants.FILE_FORMAT_WRONG);	
			}
			try { 
				is = oilCardInfoExcel.getInputStream();
			} catch (IOException e) {
				e.printStackTrace();
			}		
		}
		return oilCardInfoExcelService.oilCardInfoUpload(is);
	}