Vue + Spring boot 实现excel上传功能

最新推荐文章于 2024-07-14 16:32:48 发布

weixin_30826095

最新推荐文章于 2024-07-14 16:32:48 发布

阅读量662

点赞数

CC 4.0 BY-SA版权

文章标签： java javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/JINJAY/p/10471928.html

本文详细介绍了如何在Vue项目中使用ElementUI组件库的upload控件上传Excel文件，并通过axios与后端进行交互。讲解了配置action属性、使用before-upload钩子以及MultipartFile在后端的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先先看前端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     }