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

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

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

接下来看后台代码

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

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

File transfer(MultipartFile file) {
        if (file != null) {
            try {
                String filePath = "C:\Users\JAJ5SZH\IdeaProjects\Will-Backend\UploadFile\"+file.getOriginalFilename();
                File savedFile = new File(filePath);
                boolean isCreateSuccess = savedFile.createNewFile();
                // 是否创建文件成功
                if (isCreateSuccess) {
                    //将文件写入
                    file.transferTo(savedFile);
                    return savedFile;
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        } else {
            System.out.println("文件是空的");
        }
        return null;
    }

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

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