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开发一段时间了,感觉并不是想象中的好用,特别是出现些稀奇古怪的问题不好解决,比如下面这个问题 上午9:50:08 [vite] error while updating dependencies: Error: ENOENT: no such file or directory, open E:/workspace-dir/node…...
Linux命令200例:tail用来显示文件的末尾内容(常用)
🏆作者简介,黑夜开发者,全栈领域新星创作者✌。CSDN专家博主,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 &…...
【Unity每日一记】进行发射,位置相关的方法总结
👨💻个人主页:元宇宙-秩沅 👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨💻 本文由 秩沅 原创 👨💻 收录于专栏: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(包括centos) 如何查看服务器内存、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
原题 解题思路 直接展示源码了,flag.php应该存放了flag,在file1与file2都不为空且file2是“hello ctf”时file1将被导入。接下来做法很明显,让file为flag.php,file2为“hello ctf”。“?file1php://filter/readconvert.base64-en…...
深度学习的“前世今生”
1、“感知机”的诞生 20世纪50年代,人工智能派生出了这样两个学派,分别是“符号学派”及“连接学派”。前者的领军学者有Marvin Minsky及John McCarthy,后者则是由Frank Rosenblatt所领导。 “符号学派”的人相信对机器从头编程,…...
第一百一十九回 如何通过蓝牙设备读写数据
文章目录 概念介绍实现方法示例代码经验总结我们在上一章回中介绍了如何获取蓝牙状态相关的内容,本章回中将介绍 如何通过蓝牙设备读写数据。闲话休提,让我们一起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(emporary failure i…...
C 语言的 sprintf() 函数
<stdio.h> 原型: int sprintf(char *str, const char *format, …) 发送格式化输出到 str 所指向的字符串。 参数 str – 这是指向一个字符数组的指针,该数组存储了 C 字符串。 format – 这是字符串,包含了要被写入到字符串 str 的文本。它…...
李沐pytorch学习-卷积网络及其实现
一、卷积概述 1.1 基本定义 卷积计算过程如图1所示,即输入矩阵和核函数(filter)对应的位置相乘,然后相加得到输出对应位置的数。 图1. 卷积计算过程 该过程可以形象地从图2中展现。 图2. 二维卷积示意图 1.2 实现互相关运算的代…...
记录:win10物理机ping不通虚拟机上的docker子网(已解决)
【说明】 windows10:已关闭防火墙 linux发行版本:centos7.9(已禁用SElinux、已关闭防火墙) 虚拟机软件:VMware Workstation 17 虚拟机网络模式:NAT模式 docker版本:20.4.5 docker网络模式…...
深入浅出Pytorch函数——torch.nn.init.kaiming_normal_
分类目录:《深入浅出Pytorch函数》总目录 相关文章: 深入浅出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
范德蒙德恒等式 考虑统计每一个右括号位置的贡献,也就是每个右括号作为右边起点的贡献 其中i0的时候,r-1<r-0,故i0时贡献为0,直接套用恒等式不会有影响 #include <bits/stdc.h> using namespace std; typedef long long int ll; # d…...
xcode把包打到高版本的iPhone里
打开xcode CTRLb build工程,build成功 把手机连到mac,在xcode选项卡里面的window里面选中device and simulator 打开对应的手机的页面 然后在工程目录下build成功过后有一个product的文件夹里面,直接把app拖到对应的手机的窗口就可以不用…...
PMP项目管理考试小结
一、初步了解 每年有多次考试的机会,大概每三-四个月有一次考试机会,我下面分享的是我考试: 考试时间:8月19日 上午9:00-12:50 考试地点:北京市丰台区首都经济贸易大学(城市不一样考点不一样) …...
【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关于傅里叶变换的视频,本篇文章提供了一些基础知识点,比如三角函数常用的导数、三角函数换算公式等。 文章全部链接: 基础知识点 Part1:三角函数系的正交性 Part2:T2π的周期函数的傅里叶级数展开 P…...
怀旧服WLK:10人NAXX教官拉苏维奥斯保姆级攻略,暗牧控制与学员轮换时间轴详解
怀旧服WLK:10人NAXX教官拉苏维奥斯保姆级攻略,暗牧控制与学员轮换时间轴详解 在《魔兽世界》怀旧服巫妖王之怒版本中,纳克萨玛斯军事区的教官拉苏维奥斯堪称团队配合的"试金石"。这个看似机制简单的BOSS,却因学员控制与…...
近屿AI学:白天做运维,晚上学AI,两天入职
何屿(化名)白天还在做传统运维,晚上已经开始补AI课程。听起来有点折腾,但他比谁都清楚,稳定并不等于安全。AI兴起后,岗位要求正在变,旧经验能撑多久,他心里没底。与其等到被动调整&a…...
企业级AutoCAD自动化引擎:Python驱动CAD工作流性能提升300%架构解析
企业级AutoCAD自动化引擎:Python驱动CAD工作流性能提升300%架构解析 【免费下载链接】pyautocad AutoCAD Automation for Python ⛺ 项目地址: https://gitcode.com/gh_mirrors/py/pyautocad 技术价值定位 pyautocad作为Python生态中的企业级AutoCAD自动化解…...
Marchand Balun设计原理与IE3D电磁仿真实践
1. Marchand Balun设计基础与电磁仿真原理在射频和微波电路设计中,平衡-不平衡转换器(Balun)是实现单端信号与差分信号相互转换的关键无源器件。作为从业15年的射频工程师,我经常需要在各类高频电路中使用Balun结构,而…...
9D传感器融合技术:原理、优化与应用
1. 9D传感器融合技术概述在当今的智能设备领域,精确的姿态感知已成为标配功能。从智能手机的自动旋转屏幕到VR头显的动作追踪,背后都离不开多传感器数据的融合处理。9D传感器融合技术通过整合加速度计、陀螺仪和磁力计的数据(各提供3轴测量&a…...
八、命令行参数和环境变量
八、命令行参数和环境变量8.1 命令行参数8.2 环境变量概念8.3 常见环境变量8.4 查看环境变量指令测试 PATH8.5 环境变量相关命令8.6 环境变量组织方式8.7 环境变量通常具有全局属性进程创建机制环境变量的存储结构代码执行流程总结8.8 获取环境变量命令行第三个参数通过第三方变…...
设计程序统计行业淡季旺季,职场工作量数据,合理调配人力,解决忙闲不均,人力资源浪费职场现状。
一、实际应用场景描述在许多行业(如零售、旅游、物流、电商、教育培训等)中,普遍存在明显的季节性波动:- 旺季:订单/任务激增,员工超负荷加班- 淡季:业务量骤减,人员闲置、工时不足-…...
青海黑独山|人间极致灰度,藏着西北水墨秘境
沿着青海省海西蒙古族藏族自治州冷湖镇西南方向行驶,一片被灰黑色山体包裹的荒原逐渐展开在视野中。这便是黑独山,一处以极简色彩和奇特地形著称的自然景观。不同于常见丹霞地貌的绚烂或雅丹地貌的雄浑,黑独山的主体由灰黑色砂石、岩层与少量…...
Windows Cleaner终极指南:5个技巧让C盘空间瞬间释放
Windows Cleaner终极指南:5个技巧让C盘空间瞬间释放 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服! 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner Windows Cleaner是一款专为Windows系统设计的开源…...
从矩阵求逆到元素倒数:用Matlab power函数处理数据时,90%的人会踩的坑
从矩阵求逆到元素倒数:用Matlab power函数处理数据时,90%的人会踩的坑 在科学计算和工程分析中,Matlab作为一款强大的工具被广泛应用。然而,许多用户在数据处理过程中常常陷入一个看似简单却影响深远的陷阱——混淆矩阵元素的倒数…...
