java上传文件如何持续返回信息给前端

原创

mob649e81680b4f 2024-08-23 09:46:50 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e81680b4f的原创作品，请联系作者获取转载授权，否则将追究法律责任

Java 上传文件持续返回信息给前端的项目方案

在现代Web应用程序中，文件上传是一个常见的功能。用户通常希望在上传大型文件时，能够实时看到上传进度和状态。本文将提出一个基于Java的上传文件方案，支持持续返回上传状态信息给前端。我们将包含代码示例、序列图和状态图，以使整个方案更为清晰。

项目需求

允许用户上传文件
在上传文件的过程中，实时反馈上传进度和状态
上传完成后，返回上传结果

系统架构

整个系统可分为两个主要部分：前端和后端。前端负责显示文件上传进度和状态，后端则处理文件上传请求。

前端：使用HTML5和JavaScript（可使用Fetch或XHR API）实现文件上传，并通过WebSocket或长轮询获取进度信息。
后端：基于Spring Boot框架，使用Servlet来处理文件上传。

序列图

以下序列图展示了文件上传的过程，包括用户选择文件、发送上传请求、持续接收状态信息以及最后的上传完成状态。

sequenceDiagram
    participant U as 用户
    participant F as 前端
    participant B as 后端
    U->>F: 选择文件
    F->>B: 发送上传请求
    B-->>F: 初始化上传
    F->>B: 发送文件数据
    B-->>F: 返回进度状态
    F->>B: 获取上传状态
    B-->>F: 上传进行中
    B-->>F: 上传完成
    F-->>U: 显示上传结果

状态图

状态图展示了文件上传的不同状态，包括初始化、上传中、上传完成和上传失败。

stateDiagram
    [*] --> 初始化
    初始化 --> 上传中
    上传中 --> 上传完成
    上传中 --> 上传失败
    上传完成 --> [*]
    上传失败 --> [*]

后端实现

以下是一个简单的Java后端实现，使用Spring Boot框架进行文件上传，并使用WebSocket进行实时进度反馈。

依赖

在pom.xml中添加以下依赖以支持Spring Boot和WebSocket：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

WebSocket配置

创建一个WebSocket配置类，用于处理文件上传进度。

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new FileUploadWebSocketHandler(), "/uploadProgress").setAllowedOrigins("*");
    }
}

控制器

创建一个控制器类来处理文件上传请求并发送上传进度。

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;

@RestController
@RequestMapping("/file")
public class FileUploadController {
    
    // WebSocket会话用于发送进度信息
    private WebSocketSession session;

    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        // 初始化上传过程
        // 保存文件，模拟进度更新
        simulateFileUpload(file);
        return "File uploaded successfully!";
    }

    public void simulateFileUpload(MultipartFile file) {
        // 模拟上传过程并发送进度
        for (int i = 1; i <= 100; i++) {
            try {
                Thread.sleep(50); // 模拟上传延迟
                sendProgress(i); // 发送进度
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }

    public void sendProgress(int progress) {
        if (session != null && session.isOpen()) {
            try {
                session.sendMessage(new TextMessage("Progress: " + progress + "%"));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

前端实现

以下是一个简单的HTML和JavaScript代码示例，用于上传文件和接收进度信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button id="uploadButton">上传文件</button>
    <div id="progress"></div>

    <script>
        const socket = new WebSocket("ws://localhost:8080/uploadProgress");
        socket.onmessage = function(event) {
            document.getElementById('progress').innerText = event.data;
        };

        document.getElementById('uploadButton').onclick = function() {
            const fileInput = document.getElementById('fileInput');
            const formData = new FormData();
            formData.append("file", fileInput.files[0]);

            fetch("/file/upload", {
                method: "POST",
                body: formData,
            }).then(response => {
                return response.text();
            }).then(data => {
                console.log(data);
            }).catch(error => {
                console.error('Error:', error);
            });
        };
    </script>
</body>
</html>