Vue + Spring boot 实现excel上传功能

首先先看前端Vue，在这里我们使用了elementUI中的upload控件

       <el-upload
            class="upload-demo"
            drag
            action="#"
            multiple
            :before-upload="beforeUpload">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>            </div>
        </el-upload>

其中action里填一个无意义的地址，因为如果使用action中的地址，则url会默认使用Vue项目打开的ip地址及端口号，如http://127.0.0.1:8043/,

此时如果再在action后面填写http://127.0.0.1:8080/upload,那么完整的请求路径就会变成http://127.0.0.1:8043/127.0.0.1:8080/excel

解决的办法就是使用before-upload，然后在方法里指定url

1 beforeUpload(file){
2             var formdata = new FormData();
3             formdata.append('file',file);
4             this.$axios.post('http://127.0.0.1:8080/excel',formdata,{ headers : { 'Content-type':'multipart/form-data'}});
5         },

这里我们使用formdata来保存传输文件数据，由于是上传excel，所以必须在header里更改content-type，否则会报415错误

接下来看后台代码

1 @RequestMapping(value = "/excel",method = RequestMethod.POST)
2     void getAllByExcel(@RequestParam("file") MultipartFile MPfile)

在这里我们使用MultipartFile来接收前端传来的file，但它与file有些区别，所以我们使用一个函数来将它转化为file类型，以供后面使用

 1 File transfer(MultipartFile file) {
 2         if (file != null) {
 3             try {
 4                 String filePath = "C:\Users\JAJ5SZH\IdeaProjects\Will-Backend\UploadFile\"+file.getOriginalFilename();
 5                 File savedFile = new File(filePath);
 6                 boolean isCreateSuccess = savedFile.createNewFile();
 7                 // 是否创建文件成功
 8                 if (isCreateSuccess) {
 9                     //将文件写入
10                     file.transferTo(savedFile);
11                     return savedFile;
12                 }
13             } catch (Exception e) {
14                 e.printStackTrace();
15             }
16         } else {
17             System.out.println("文件是空的");
18         }
19         return null;
20     }

主要使用的是transferTo()这个MultipartFile封装好的函数，在filePath里面定义我们存放文件的文件夹，文件的命名可以使用uuid

至此，就实现了上传excel的功能，欢迎指正交流！