SpringBoot+Vue实现简单的文件上传（txt篇）

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