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();
    }
}
                


















