springboot文件上传进度显示

要实现Spring Boot文件上传进度显示，可以使用以下步骤：

1. 添加依赖：在pom.xml文件中添加以下依赖：

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>

2. 创建上传控制器：创建一个Spring Boot控制器来处理文件上传请求。在该控制器中，我们需要使用Apache Commons FileUpload库来解析文件上传请求，并将文件保存到服务器上。此外，我们还需要计算上传进度并将其发送给客户端。

@RestController
public class UploadController {

    @PostMapping("/upload")
    public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile file) {

        // Get file size
        long fileSize = file.getSize();

        // Create a new file on the server
        File serverFile = new File("/path/to/upload/directory/" + file.getOriginalFilename());

        try (InputStream is = file.getInputStream();
             BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(serverFile))) {

            byte[] buffer = new byte[4096];
            long uploaded = 0;

            int read;
            while ((read = is.read(buffer)) != -1) {
                bos.write(buffer, 0, read);
                uploaded += read;

                // Calculate upload progress
                double progress = (double) uploaded / fileSize * 100;

                // Send progress update to client
                // This can be done using WebSockets, Server-Sent Events or polling
                // For this example, we will use a simple JSON response
                Map<String, Double> response = new HashMap<>();
                response.put("progress", progress);
                return ResponseEntity.ok(response);
            }

        } catch (IOException e) {
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
        }

        return ResponseEntity.ok().build();
    }
}

3. 客户端实现：客户端需要发送文件上传请求，并通过一种方式来接收和显示进度更新。这可以通过WebSockets，Server-Sent Events或轮询来完成。在此示例中，我们将使用Ajax轮询来检索进度更新。

function uploadFile() {
    var formData = new FormData();
    formData.append("file", document.getElementById("file").files[0]);

    var xhr = new XMLHttpRequest();

    xhr.upload.addEventListener("progress", function(event) {
        if (event.lengthComputable) {
            var percentComplete = event.loaded / event.total * 100;
            console.log(percentComplete.toFixed(2) + "%");
        }
    }, false);

    xhr.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var response = JSON.parse(this.responseText);
            var progress = response.progress;
            console.log(progress.toFixed(2) + "%");
        }
    };

    xhr.open("POST", "/upload");
    xhr.send(formData);
}

此外，还可以使用第三方库，如ng-file-upload，来实现更高级的文件上传和进度显示功能。