SpringBoot+Vue实现简单的文件上传
1 环境 SpringBoot 3.2.1,Vue 2,ElementUI
2 页面
3 效果:只能上传txt文件且大小限制为2M,选择文件后自动上传。
4 前端代码
<template>
<div class="container">
<el-upload
class="upload-demo"
drag
action="/xml/fileUpload"
multiple
accept=".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 < 2
if(!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();
}
}