SpringBoot+Vue实现简单的文件上传

1 环境 SpringBoot 3.2.1，Vue 2，ElementUI
2 页面

3 效果：只能上传txt文件且大小限制为2M，选择文件后自动上传。
4 前端代码

<template><div class="container"><el-uploadclass="upload-demo"dragaction="/xml/fileUpload"multipleaccept=".txt":before-upload="beforeUpload"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip"><slot name="tip" > 只能上传 txt 文件，且不超过2M</slot></div></el-upload></div>
</template><script>
// import axios from "axios";export default {name: 'App',data() {const data = [];return {}},watch: {},created() {},methods: {beforeUpload(file){console.log(file.type)const isText = file.type == "text/plain"const isLt2M = file.size /1024 /1024 < 2if(!isText){this.$message.error("只能上传txt文件！")}if(!isLt2M){this.$message.error("文件大小超过限制！")}}}
}
</script><style>
.container {display: flex;
}
</style>

5 后端代码

package org.wjg.onlinexml.controller;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.wjg.onlinexml.po.Result;import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;@RestController
public class FileController {@RequestMapping("/fileUpload")private Result getXml(@RequestParam("file") MultipartFile file) {if (file.isEmpty()) {return Result.builder().code(500).msg("上传失败！").build();}try (BufferedReader reader = new BufferedReader(new InputStreamReader(file.getInputStream()))) {String line;while ((line = reader.readLine()) != null) {// 在这里处理读取到的每一行内容System.out.println(line);}} catch (IOException e) {e.printStackTrace();}return Result.builder().code(200).msg("上传成功").build();}
}