当前位置: 首页 > news >正文

vue2+Spring Boot2.7 大文件分片上传

之前我们文章 手把手带大家实现 vue2+Spring Boot2.7 文件上传功能 将了上传文件
但如果文件很大 就不太好处理了 按正常情况甚至因为超量而报错

这里 我弄了个足够大的文件
在这里插入图片描述
我们先搭建 Spring Boot2.7 环境
首先 application.yml 代码编写如下

server:port: 80
upload:path: D:/upload/
spring:servlet:multipart:max-file-size: 500MBmax-request-size: 500MB

这里 我们改了他对请求大小的限制 不然 你上次300M左右的东西 系统直接抛异常了

然后 我们将FileUploadController 类代码更改如下

package com.example.javadom.controller;import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;@RestController
public class FileUploadController {//读取配置文件中的 upload下的path@Value("${upload.path}")private String uploadPath;@PostMapping("/upload")public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {// 处理上传逻辑,可以根据需要保存文件到指定目录// 这里假设保存到D:/upload/目录下try {String filePath = uploadPath + file.getOriginalFilename();file.transferTo(new File(filePath));// 进行后续处理,比如返回成功消息给前端return ResponseEntity.ok("File uploaded successfully");} catch (IOException e) {e.printStackTrace();// 发生错误时,返回错误消息给前端return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload file");}}
}

然后 我们vue代码 将 App.vue改成这样

<template><div><input type="file" @change="onFileChange" /><button @click="uploadFile">Upload</button><div v-if="uploadProgress !== null">Upload progress: {{ uploadProgress }}%</div></div>
</template><script>
import axios from 'axios';export default {data() {return {file: null,uploadProgress: null,};},methods: {onFileChange(event) {this.file = event.target.files[0];},uploadFile() {const formData = new FormData();formData.append('file', this.file);axios.post('/upload', formData, {headers: {'Content-Type': 'multipart/form-data',},onUploadProgress: (progressEvent) => {this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);},}).then((response) => {console.log('Upload successful',response);}).catch((error) => {console.error('Upload failed', error);});},},
};
</script>

然后 我们将项目运行起来
这是我们的vue界面
在这里插入图片描述
然后 我们看到 D盘下的upload
在这里插入图片描述
还是只有上文的两个图片
然后 我们点击页面中的 选择文件
在这里插入图片描述
将我们的大文件放进来
在这里插入图片描述
然后我们点击 Upload

我们可以看到 请求还没返回前 onUploadProgress 就在跑了
axios的onUploadProgress 是一个专门用来监听文件上传的事件 有兴趣可以自己去了解一下
在这里插入图片描述
文件上传完 进度就会100 请求也返回了
在这里插入图片描述
我们看看文件夹
在这里插入图片描述
我们打开文件看一下
在这里插入图片描述
也是没有任何问题

相关文章:

vue2+Spring Boot2.7 大文件分片上传

之前我们文章 手把手带大家实现 vue2Spring Boot2.7 文件上传功能 将了上传文件 但如果文件很大 就不太好处理了 按正常情况甚至因为超量而报错 这里 我弄了个足够大的文件 我们先搭建 Spring Boot2.7 环境 首先 application.yml 代码编写如下 server:port: 80 upload:path:…...

Vite更新依赖缓存失败,强制更新依赖缓存

使用vitets开发一段时间了&#xff0c;感觉并不是想象中的好用&#xff0c;特别是出现些稀奇古怪的问题不好解决&#xff0c;比如下面这个问题 上午9:50:08 [vite] error while updating dependencies: Error: ENOENT: no such file or directory, open E:/workspace-dir/node…...

Linux命令200例:tail用来显示文件的末尾内容(常用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…...

【Unity每日一记】进行发射,位置相关的方法总结

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…...

MISRA 2012学习笔记(3)-Rules 8.4-8.7

文章目录 Rules8.4 字符集和词汇约定(Character sets and lexical conventions)Rule 4.1 八进制和十六进制转译序列应有明确的终止识别标识Rule 4.2 禁止使用三字母词(trigraphs) 8.5 标识符(Identifiers)Rule 5.1 外部标识符不得重名Rule 5.2 同范围和命名空间内的标识符不得重…...

centos7组件搭建

Linux&#xff08;包括centos&#xff09; 如何查看服务器内存、CPU su - root 切换用户 centos 密码 空格 https://blog.csdn.net/weixin_45277161/article/details/131524555 CentOS 7 安装 Docker 的详细步骤 https://blog.csdn.net/qq_39997939/article/details/13100…...

webpack5和webpack4的一些区别

自动清除打包目录 webpack4 // bash npm i clean-webpack-plugin -D //webpack.config.js const {CleanWebpackPlugin} require(clean-webpack-plugin); module.exports {plugins: [new CleanWebpackPlugin()} } webpack5 module.exports {output: {clean: true} } topLevel…...

攻防世界-fileclude

原题 解题思路 直接展示源码了&#xff0c;flag.php应该存放了flag&#xff0c;在file1与file2都不为空且file2是“hello ctf”时file1将被导入。接下来做法很明显&#xff0c;让file为flag.php&#xff0c;file2为“hello ctf”。“?file1php://filter/readconvert.base64-en…...

深度学习的“前世今生”

1、“感知机”的诞生 20世纪50年代&#xff0c;人工智能派生出了这样两个学派&#xff0c;分别是“符号学派”及“连接学派”。前者的领军学者有Marvin Minsky及John McCarthy&#xff0c;后者则是由Frank Rosenblatt所领导。 “符号学派”的人相信对机器从头编程&#xff0c…...

第一百一十九回 如何通过蓝牙设备读写数据

文章目录 概念介绍实现方法示例代码经验总结我们在上一章回中介绍了如何获取蓝牙状态相关的内容,本章回中将介绍 如何通过蓝牙设备读写数据。闲话休提,让我们一起Talk Flutter吧。 概念介绍 通过蓝牙设备读写数据有两种方法: 一种是读写Characteristics;一种是读写Descri…...

linux:Temporary failure in name resolutionCouldn’t resolve host

所有域名无法正常解析。 ping www.baidu.com 等域名提示 Temporary failure in name resolution错误。 rootlocalhost:~# ping www.baidu.com ping: www.baidu.com: Temporary failure in name resolution rootlocalhost:~# 一、ubuntu/debian&#xff08;emporary failure i…...

C 语言的 sprintf() 函数

<stdio.h> 原型: int sprintf(char *str, const char *format, …) 发送格式化输出到 str 所指向的字符串。 参数 str – 这是指向一个字符数组的指针&#xff0c;该数组存储了 C 字符串。 format – 这是字符串&#xff0c;包含了要被写入到字符串 str 的文本。它…...

李沐pytorch学习-卷积网络及其实现

一、卷积概述 1.1 基本定义 卷积计算过程如图1所示&#xff0c;即输入矩阵和核函数&#xff08;filter&#xff09;对应的位置相乘&#xff0c;然后相加得到输出对应位置的数。 图1. 卷积计算过程 该过程可以形象地从图2中展现。 图2. 二维卷积示意图 1.2 实现互相关运算的代…...

记录:win10物理机ping不通虚拟机上的docker子网(已解决)

【说明】 windows10&#xff1a;已关闭防火墙 linux发行版本&#xff1a;centos7.9&#xff08;已禁用SElinux、已关闭防火墙&#xff09; 虚拟机软件&#xff1a;VMware Workstation 17 虚拟机网络模式&#xff1a;NAT模式 docker版本&#xff1a;20.4.5 docker网络模式…...

深入浅出Pytorch函数——torch.nn.init.kaiming_normal_

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…...

D. Anton and School - 2

范德蒙德恒等式 考虑统计每一个右括号位置的贡献&#xff0c;也就是每个右括号作为右边起点的贡献 其中i0的时候&#xff0c;r-1<r-0,故i0时贡献为0&#xff0c;直接套用恒等式不会有影响 #include <bits/stdc.h> using namespace std; typedef long long int ll; # d…...

xcode把包打到高版本的iPhone里

打开xcode CTRLb build工程&#xff0c;build成功 把手机连到mac&#xff0c;在xcode选项卡里面的window里面选中device and simulator 打开对应的手机的页面 然后在工程目录下build成功过后有一个product的文件夹里面&#xff0c;直接把app拖到对应的手机的窗口就可以不用…...

PMP项目管理考试小结

一、初步了解 每年有多次考试的机会&#xff0c;大概每三-四个月有一次考试机会&#xff0c;我下面分享的是我考试&#xff1a; 考试时间&#xff1a;8月19日 上午9:00-12:50 考试地点&#xff1a;北京市丰台区首都经济贸易大学&#xff08;城市不一样考点不一样&#xff09; …...

【NAS群晖drive异地访问】使用cpolar远程访问内网Synology Drive「内网穿透」

文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…...

【傅里叶级数与傅里叶变换】数学推导——2、[Part2:T = 2 π的周期函数的傅里叶级数展开] 及 [Part3:周期为2L的函数展开]

文章内容来自DR_CAN关于傅里叶变换的视频&#xff0c;本篇文章提供了一些基础知识点&#xff0c;比如三角函数常用的导数、三角函数换算公式等。 文章全部链接&#xff1a; 基础知识点 Part1&#xff1a;三角函数系的正交性 Part2&#xff1a;T2π的周期函数的傅里叶级数展开 P…...

大模型微调实战:用百元级GPU打造专属AI助手

测试工程师的AI困局与破局在软件测试领域&#xff0c;我们每天都在与各种文本打交道——测试用例、缺陷报告、自动化脚本、需求文档、评审记录。大语言模型&#xff08;LLM&#xff09;的爆发让我们看到了提效的曙光&#xff0c;但很快就会发现&#xff0c;通用模型对测试业务的…...

从Xilinx 7系列FPGA看架构演进与工程选型实战

1. 项目概述&#xff1a;从一则旧闻看FPGA的演进与选型看到这个标题&#xff0c;很多朋友可能会觉得这是一则十多年前的“旧闻”了。确实&#xff0c;2011年Xilinx宣布其28nm 7系列FPGA在六个月内获得超过200个设计订单&#xff0c;这在当时是半导体行业的一个里程碑。但今天回…...

AI Agent 对比和选型

一、前言&#xff01;&#xff01;&#xff01;Agent&#xff0c;把天才 AI 变成一个能干活的人 &#xff01;&#xff01;&#xff01;如果说 LLM 大模型是一个天才引擎&#xff0c;那么 Agent 就是很多无形的手&#xff0c;去控制这个天才引擎完成各种各样的工作和流程&#…...

HuggingClaw:用开源模型模拟Claude API的本地开发与测试方案

1. 项目概述&#xff1a;当HuggingFace遇上Claude&#xff0c;一个AI模型管理新思路最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“HuggingClaw”。光看名字&#xff0c;你大概就能猜到它想干什么——把HuggingFace和Claude这两个在AI领域响当当的名字结合到一起。作为…...

手机资料恢复

在数字化生活高度渗透的今天&#xff0c;手机早已不仅是通讯工具&#xff0c;更是承载个人记忆、工作文档与社交关系的核心载体。一张重要的照片、一份未备份的合同、一段珍贵的聊天记录&#xff0c;一旦因误操作或意外损坏而丢失&#xff0c;带来的往往是情感上的失落与业务上…...

【粉丝福利社】三维重建技术与实践:基于NeRF与3DGS

&#x1f48e;【行业认证权威头衔】 ✔ 华为云天团核心成员&#xff1a;特约编辑/云享专家/开发者专家/产品云测专家 ✔ 开发者社区全满贯&#xff1a;CSDN博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主 ✔ 技术生态共建先锋&am…...

MongoDB Atlas Vector Search与LangChain集成:构建企业级RAG系统实践

1. 项目概述&#xff1a;当MongoDB遇见生成式AI最近在开发者社区里&#xff0c;一个名为mongodb-developer/GenAI-Showcase的项目引起了我的注意。作为一名长期与数据打交道的开发者&#xff0c;我深知在生成式AI&#xff08;GenAI&#xff09;浪潮席卷而来的当下&#xff0c;如…...

Discord服务器日活破5万后ChatGPT机器人崩了?百万级消息队列+状态分片架构设计(附GitHub星标1.2k的开源模板)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Discord服务器日活破5万后ChatGPT机器人崩了&#xff1f; 当 Discord 社区日活跃用户突破 5 万时&#xff0c;一个基于 OpenAI API 的 ChatGPT 机器人在高峰时段突然出现 98% 的请求超时与 429&#xf…...

如何零安装体验Windows 12:网页版模拟器完整指南

如何零安装体验Windows 12&#xff1a;网页版模拟器完整指南 【免费下载链接】win12 Windows 12 网页版&#xff0c;在线体验 点击下面的链接在线体验 项目地址: https://gitcode.com/gh_mirrors/wi/win12 你是否想在浏览器中直接运行Windows系统&#xff1f;无需下载任…...

FPGA仿真入门:手把手教你配置Quartus Prime 21.1里的Questa Starter版(附12个月免费许可攻略)

FPGA仿真工具链实战&#xff1a;从Questa Starter许可申请到Quartus Prime深度集成 当数字逻辑设计从纸上谈兵进入硬件实现阶段&#xff0c;仿真验证便成为FPGA开发流程中不可逾越的质量关卡。作为Intel FPGA生态中的黄金搭档&#xff0c;Quartus Prime与Questa的协同工作能帮助…...