SpringBoot+Vue实现简单的文件上传(txt篇)

news2024/9/22 1:11:29

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1926416.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MySQl高级篇 -索引优化篇

索引 InnoDB采用了一个B数来存储索引&#xff0c;使得在千万级数据量的一个情况下&#xff0c;树的高度可以控制在3层以内&#xff0c;而层高代表磁盘IO的一个次数&#xff0c;因此基于索引查找可以减少磁盘IO的次数 MySQL的索引是在存储引擎层实现的&#xff0c;不同的存储引…

AI 歌词创作:突破想象,惊艳听觉

在音乐的世界里&#xff0c;歌词是触动心灵的钥匙&#xff0c;是引发共鸣的桥梁。而如今&#xff0c;AI 歌词创作正以其惊人的力量&#xff0c;突破我们的想象&#xff0c;为我们带来前所未有的听觉盛宴。 “妙笔生词智能写歌词软件&#xff08;veve522&#xff09;”便是这场…

Prometheus 云原生 - Prometheus 数据模型、Metrics 指标类型、Exporter 相关

目录 开始 Prometheus 数据类型 简单理解 时序样本 格式 和 命名要求 Metrics 指标类型 Counter 计数器 Gauge Histogram Summary Exporter 相关 概述 Exporter 类型 Exporter 规范 开始 Prometheus 数据类型 简单理解 a&#xff09;安装好 Prometheus 后会暴露…

tomcat的优化、动静分离

tomcat的优化 tomcat自身的优化 tomcat的并发处理能力不强&#xff0c;大项目不适应tomcat做为转发动态的中间件&#xff08;k8s集群&#xff0c;pytnon rubby&#xff09;&#xff0c;小项目会使用&#xff08;内部使用的&#xff09;动静分离 默认配置不适合生产环境&…

基于SpringBoot+VueJS+微信小程序技术的图书森林共享小程序设计与实现

注&#xff1a;每个学校每个老师对论文的格式要求不一样&#xff0c;故本论文只供参考&#xff0c;本论文页数达到60页以上&#xff0c;字数在6000及以上。 基于SpringBootVueJS微信小程序技术的图书森林共享小程序设计与实现 目录 基于SpringBootVueJS微信小程序技术的图书森…

自动驾驶-端到端分割任务

上采样 bed of nails interpolation transposed convolutions 1. 上采样 (Upsampling) 上采样是一种技术&#xff0c;用于增加数据集中的样本数量或是提高信号的分辨率。在图像处理中&#xff0c;上采样通常指的是增加图像的像素数量&#xff0c;从而使图像变得更大。这可…

MySQL 中的几种锁

MySQL 中的锁 #按锁粒度如何划分? 按锁粒度划分的话&#xff0c;MySQL 的锁有&#xff1a; 表锁&#xff1a;开销小&#xff0c;加锁快&#xff1b;锁定力度大&#xff0c;发生锁冲突概率高&#xff0c;并发度最低;不会出现死锁。行锁&#xff1a;开销大&#xff0c;加锁慢…

Prometheus 云原生 - 基于 file_sd、http_sd 实现 Service Discovery

目录 开始 为什么需要服务发现机制 File Service Discovery&#xff08;file_sd&#xff09; 基本概念 配置方式 使用案例 HTTP Service Discovery&#xff08;http_sd&#xff09; 基本概念 配置方式 使用案例 开始 为什么需要服务发现机制 我们知道在 Prometheus …

【Linux】:文件fd

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家带来关于文件fd的相关知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数据…

Java二十三种设计模式-单例模式(1/23)

引言 在软件开发中&#xff0c;设计模式是一套被反复使用的、大家公认的、经过分类编目的代码设计经验的总结。单例模式作为其中一种创建型模式&#xff0c;确保一个类只有一个实例&#xff0c;并提供一个全局访问点。本文将深入探讨单例模式的概念、实现方式、使用场景以及潜…

C语言 ——— 模拟实现strcpy函数

目录 strcpy函数功能介绍 strcpy函数的模拟实现 strcpy函数功能介绍 学习并使用strcpy函数-CSDN博客 strcpy函数的模拟实现 代码演示&#xff1a; #include<stdio.h> #include<assert.h> char* my_strcpy(char* destination, const char* source) {assert(des…

单目3D和bev综述

文章目录 SOTA2D 检测单目3d检测3d bev cam范式1 Transformer attention is all you need 20172 ViT vision transformer ICLR 2021google3 swin transformer 2021 ICCV bestpaper MS4 DETR 20205 DETR3D 20216 PETR 20227 bevformerLSSbevdetcaddn指标 mAP NDS标注&#xff1a…

kubernetes——Istio(三)

一、安全 将单一应用程序分解为微服务可提供各种好处&#xff0c;包括更好的灵活性、 可伸缩性以及服务复用的能力。但是&#xff0c;微服务也有特殊的安全需求&#xff1a; 为了抵御中间人攻击&#xff0c;需要流量加密。为了提供灵活的服务访问控制&#xff0c;需要双向 TL…

【P2P_BMA_P2MP_NBMA】

基本概念介绍 1. BMA&#xff08;Broadcast&#xff09; 广播型多路访问技术&#xff0c;在一个MA&#xff08;多路访问&#xff0c;在一个网段内的节点数量不限制。&#xff09;网络中同时存在广播机制。 特点&#xff1a; 允许将数据包广播到网络上的所有主机。路由器之间…

科普文:微服务技术栈梳理

概叙 如上两图所示&#xff0c;微服务架构下&#xff0c;需要的组件很多&#xff0c;上面中也并未列全。下面将梳理一下国内微服务架构下&#xff0c;用到的技术栈&#xff0c;仅供参考。 科普文&#xff1a;12种常见的软件架构-CSDN博客 没有最好的架构&#xff0c;只有最适…

开启音乐新纪元,AI人工智能创新歌词

在音乐的漫长历史长河中&#xff0c;每一次的创新都如同璀璨星辰&#xff0c;照亮了前行的道路。如今&#xff0c;人工智能的崛起正引领着音乐创作步入一个全新的纪元&#xff0c;为歌词领域带来了前所未有的变革。 “妙笔生词智能写歌词软件&#xff08;veve522&#xff09;”…

智慧园区智能化解决方案PPT(173页)

智慧园区智能化解决方案摘要 智慧园区智能化解决方案是一项综合性的系统工程&#xff0c;它通过集成先进的信息技术&#xff0c;实现园区管理的自动化、智能化&#xff0c;提高园区的安全性、效率和舒适度。本文详细介绍了某智慧园区项目的规划与设计&#xff0c;该项目建筑面…

python的字符串

字符串 简单操作 创建 利用 ‘ ’ 或 “ ” 将字符或数字包裹起来的都为字符串 a"你好" 格式化字符串 元组的字符格式化 字符串格式化函数 srt.format() f格式化 方法 split()//指定分割符经行分割 strip()//指定移除字符头尾的字符 join()//指定序列中的字符连接成新…

C#学习

C#学习 1.B站丑萌气质狗C#的循环-判断泛型错误处理面向对象static的使用定义showInfo类和Hero类 在这里插入图片描述 然后在该解决方案add新建一个类库&#xff0c;点击rebuild&#xff0c;会在bin文件夹下生成.dll文件 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direc…

SAC-IA粗配准算法记录

1. 算法思路 SAC-IA(Sample Consensus Initial Aligment,SAC-IA)粗配准算法是一种基于局部特征描述子的点云粗配准算法,其需要计算点云的快速点特征直方图(FPFH)来保持对应点对之间的相似关系,根据相似关系来搜索点云中的对应点。其基本原理是采用采样一致性的思想,通过查…