Vue + SpringBoot 上传 Excel 文件

Step2： 引用组件，指定上传方法

这里对 axios 做了封装含斗老，可以直接调谈升用 api 中对应的方法：

Controller 层接收请求：

Service 层处理 Excel 文件，取出数据做销正相应的业务处理。

到此，Vue 上传文件到后端完成，效果如下：

1.必须是post请求，需要设置headers: {'Content-Type':'multipart/form-data'},在这个前提下才能文件上传。

2.你的文件上传 <input type="file" @change="getFile($event)"/>

外层要有 <form enctype="multipart/form-data" name="fileinfo" id="myForm"></form>

3. <input type="file" @change="getFile($event)"/>的change方法很重要，要记得加上，是用来获取选择的文件的信息数据。

4.参数传递要这么处理：把接口的所有参数通过这个方式加到params里。这样在控制台看到的参数格式才是对的，如下图型者配。

这里遇到一个坑，就是不这么处理，而是简单的formData = params这么传递，auth_user_file看卜指到是｛｝，虽然选择文件时在控制台能看到信息，但是作为接口参数传递时就为{}

5.因为我们这个项目的文件上传项不是必填，也可以选择手动输入，如果没有选择文件，建议这么处理。

-- headers: { 'Content-Type': 'application/x-www-form-urlencoded'}

-- params = Qs.stringify(params)//处理参数参数作为对象传递就可以了，嫌裂但是要用vue的qs进行处理。参数格式在控制台看到是这样的

关于文件上传实现的源码贴在下面，供参考

PermissionSettings.vue

servers.js

$.ajax文件上传：

报错

增加参数：processData设置为false。因为data值是FormData对象，不需要对数据做处理。

---