Vue 3 和 SpringBoot 实现文件分片上传示例

前端实现(Vue 3和vue-upload-component)

  1. 安装 vue-upload-component
npm install vue-upload-component --save
  1. 创建一个Vue组件用于上传文件(FileUploader.vue):
<template><div><file-upload:multiple="false":size="5242880":thread="1":auto="true":extensions="['jpg', 'png', 'gif']"@input-file="inputFile"ref="upload"><div class="btn btn-primary">选择文件</div></file-upload></div>
</template><script>
import FileUpload from 'vue-upload-component';export default {components: {FileUpload,},data() {return {uploadUrl: '/upload',chunkSize: 1 * 1024 * 1024, // 1MB};},methods: {inputFile(newFile, oldFile, prevent) {if (newFile && newFile.file) {if (newFile.active && newFile.size > this.chunkSize) {prevent();this.uploadChunks(newFile);}}},async uploadChunks(file) {const totalChunks = Math.ceil(file.size / this.chunkSize);for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {const start = chunkIndex * this.chunkSize;const end = Math.min(start + this.chunkSize, file.size);const chunk = file.file.slice(start, end);const formData = new FormData();formData.append('file', chunk);formData.append('chunk', chunkIndex + 1);formData.append('totalChunks', totalChunks);formData.append('fileName', file.name);await this.uploadChunk(formData);}// Notify backend that all chunks have been uploadedawait this.uploadComplete(file);},uploadChunk(formData) {return fetch(this.uploadUrl, {method: 'POST',body: formData,}).then(response => response.json());},uploadComplete(file) {return fetch(\`\${this.uploadUrl}/complete\`, {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({fileName: file.name,totalChunks: Math.ceil(file.size / this.chunkSize),}),}).then(response => response.json());},},
};
</script>

后端实现(Spring Boot)

  1. 在Spring Boot项目中创建控制器:
@RestController
@RequestMapping("/upload")
public class FileUploadController {private final Path rootLocation = Paths.get("upload-dir");@PostMappingpublic ResponseEntity<String> uploadChunk(@RequestParam("file") MultipartFile file,@RequestParam("chunk") int chunk,@RequestParam("totalChunks") int totalChunks,@RequestParam("fileName") String fileName) throws IOException {Files.createDirectories(rootLocation);Path tempFile = this.rootLocation.resolve(fileName + ".part" + chunk);Files.copy(file.getInputStream(), tempFile, StandardCopyOption.REPLACE_EXISTING);return ResponseEntity.ok().body("Chunk " + chunk + " is uploaded successfully.");}@PostMapping("/complete")public ResponseEntity<String> completeUpload(@RequestBody CompleteUploadRequest request) throws IOException {Path targetFile = this.rootLocation.resolve(request.getFileName());try (OutputStream os = Files.newOutputStream(targetFile, StandardOpenOption.CREATE, StandardOpenOption.APPEND)) {for (int i = 1; i <= request.getTotalChunks(); i++) {Path tempFile = this.rootLocation.resolve(request.getFileName() + ".part" + i);Files.copy(Files.newInputStream(tempFile), os);Files.delete(tempFile);}}return ResponseEntity.ok().body("File uploaded and merged successfully.");}public static class CompleteUploadRequest {private String fileName;private int totalChunks;// Getters and setters}
}

以上代码展示了如何在Vue 3中使用vue-upload-component实现分片上传,并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端,后端接收到所有分片后再进行合并,最终保存为一个完整文件。

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

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

相关文章

基于VUE的软件项目开发管理系统/项目管理系统/软件开发过程管理系统的设计与实现

摘 要 在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括软件项目开发管理系统的网络应用&#xff0c;在外国软件项目开发管理系统已经是很普遍的方式&#xff0c;不过国内的软件项目开发管理可能还处于起步阶段。软件项目开发…

【计算机网络】三次握手、四次挥手

问&#xff1a;三次握手 四次挥手 TCP 连接过程是 3 次握手&#xff0c;终止过程是 4 次挥手 3次握手 第一步&#xff1a;客户端向服务器发送一个带有 SYN&#xff08;同步&#xff09;标志的包&#xff0c;指示客户端要建立连接。 第二步&#xff1a;服务器收到客户端的请求…

【ffmpeg命令基础】视频选项讲解

文章目录 前言设置输出文件的帧数设置每秒播放的帧数设置输出视频的帧率示例1&#xff1a;更改输出视频的帧率示例2&#xff1a;将图像序列转换为视频 设置输入视频的帧率示例3&#xff1a;处理高帧率视频示例4&#xff1a;处理低帧率视频 同时设置输入和输出帧率示例5&#xf…

QtCreator和QtDesignStudio最佳实践

一、QTC和QDS工作流概述 很多初学者对 QDS(Qt Design Studio) 和 QTC(Qt Creator)如何配合经常存有疑问&#xff0c;本文介绍具体的工作流程。 工作流程 1.产品设计&#xff1a;通过PS、Figma、XD等专业工具设计页面视觉和原型。 2.QDS 原型制作&#xff1a;导入设计源文件、…

C++五子棋(未做完,但能玩,而且还不错)

代码放下面了&#xff0c;关于步骤介绍的我以后再完善一下。 #include<bits/stdc.h> #include<cstdio> #include<cstdlib> #include<ctime> #include<windows.h> #include<stdlib.h> #include<time.h> #define random(x) (rand()%x…

go 用字面量的方式创建对象

在 Go 语言中&#xff0c;可以使用字面量的方式创建对象&#xff08;结构体&#xff09;。这种方法可以简洁地初始化结构体&#xff0c;并且可以在定义和赋值时同时完成。 下面是一个示例代码&#xff0c;展示了如何使用字面量的方式创建一个结构体对象&#xff1a; package …

线程局部变量共享 -- 使用ThreadLocal解决该需求

1.创建容器类 //容器类 public class Contain {private static final ThreadLocal<DataPackage> local;static {local new ThreadLocal<>();}public static ThreadLocal<DataPackage> getLocal() {return local;} } 2.创建数据包类 //数据包类 public cl…

react中如何mock数据

1.需求说明 因为前后端分离开发项目&#xff0c;就会存在前端静态页面写好了&#xff0c;后端数据接口还没写好&#xff1b;这时候前端就需要自己定义数据来使用。 定义数据有三种方式&#xff1a;直接写死数据、使用mock软件、json-server工具 这里讲解通过json-server工具…

脉冲编码调制(PCM,Pulse Code Modulation)简介

脉冲编码调制(PCM,Pulse Code Modulation) 脉冲编码调制&#xff08;PCM&#xff0c;Pulse Code Modulation&#xff09;是一种将模拟信号转换为数字信号的技术。在音频处理、电话通信以及其他许多领域都有广泛应用。PCM通过采样、量化、编码等三个主要步骤将模拟信号转换为数…

C#基础入门:从安装到第一个Hello World程序

在编程的世界里&#xff0c;C#是一种备受推崇的编程语言&#xff0c;它以其强大的功能、面向对象的特性和对.NET框架的深度集成而闻名。无论你是编程新手还是寻求新挑战的资深开发者&#xff0c;C#都是一个值得探索的领域。本文将带你踏上C#编程的旅程&#xff0c;从安装必要的…

如何通过一条SQL变更多个分库分表?

数据库发展到今天&#xff0c;分库分表已经不是什么新鲜话题了&#xff0c;传统的单节点数据库架构在数据量和访问频次达到一定规模时&#xff0c;会出现性能瓶颈和扩展性问题&#xff0c;而分库分表技术通过将数据分散到多个数据库实例中来分担负载&#xff0c;从而提升系统的…

力扣第二十九题——两数相除

内容介绍 给你两个整数&#xff0c;被除数 dividend 和除数 divisor。将两数相除&#xff0c;要求 不使用 乘法、除法和取余运算。 整数除法应该向零截断&#xff0c;也就是截去&#xff08;truncate&#xff09;其小数部分。例如&#xff0c;8.345 将被截断为 8 &#xff0c;-…

Electron的入门介绍与使用(1)共30节

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 入门指南​ Electron 是网页应用 …

IEDA怎么把springboot项目 启动多个

利用Idea提供的Edit Configurations配置应用参数。 点击Modify Options进行添加应用参数&#xff1a; 确保这里勾选

宿舍生活新升级:智能指纹锁的便捷体验(嘉立创EDA设计)

宿舍生活新升级&#xff1a;智能指纹锁的便捷体验 引言 宿舍生活总是充满挑战和乐趣&#xff0c;但有时也会因为一些小事情而变得复杂。比如&#xff0c;忘记带钥匙或者需要频繁地给室友开门。随着科技的发展&#xff0c;智能设备逐渐走进我们的生活&#xff0c;为日常带来便…

每日好题(2)

#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> int main(void) {int arr[6] { 1,2,3,4,5,6 };char* p arr;int sz sizeof(arr) / sizeof(arr[0]);for (int a 0; a < sz; a){printf("%d\n", *p);p 4;}return 0; }这串代码遍历打印数组的结果是没…

在 VM 虚拟机中安装 openEuler + 桌面

在 VM 虚拟机中安装 openEuler 1 介绍2 步骤语言Root 账户安装位置网络和主机名自动检索到【推荐】手动配置网络 软件选择安装完成登录测试网络curl ip / ping ipip link show / ip a如网络不通&#xff0c;可检查网卡状态和dns配置 安装命令设置以图形界面的方式启动【dde】第…

Python Django功能强大的扩展库之channels使用详解

概要 随着实时 web 应用程序的兴起,传统的同步 web 框架已经无法满足高并发和实时通信的需求。Django Channels 是 Django 的一个扩展,旨在将 Django 从一个同步 HTTP 框架转变为一个支持 WebSockets、HTTP2 和其他协议的异步框架。它不仅能够处理传统的 HTTP 请求,还可以处…

封装分页组件(Pagination)v2版本

使用须知&#xff1a;基于项目内已安装vue2eleme-ui&#xff0c; 则可以百分百直接套用&#xff0c;使用简介明了&#xff01;&#xff01; 一、封装component组件 component/Pagination/index.js <template><div :class"{ hidden: hidden }" class"…

动态规划之三—— 从暴力递归到动态规划_数字字符串转字母字符串

题目&#xff1a; 规定1 和A 对应&#xff0c;2 和B对应&#xff0c;3 和C 对应 ... 那么一个数字字符串&#xff0c;比如“111” 就可以转化为&#xff1a;“AAA” 、“KA”、“AK” 。要求&#xff1a;给定一个只有数字字符组成的字符串str&#xff0c; 返回有多少种转化结果…