SpringBoot实战：实时追踪文件上传下载进度，提升用户体验！

后端

2023-12-29 05:38:25

SpringBoot 文件上传下载实时进度条：提升用户体验的利器

痛苦的开始：用户体验的痛点

在当今互联网时代，文件上传下载早已成为家常便饭。然而，当文件庞大或网络环境欠佳时，漫长的等待时间往往令人抓狂。如何让用户在文件传输过程中及时掌握进度，从而提升用户体验？

柳暗花明：SpringBoot 的福音

SpringBoot 的出现为我们带来了福音。这个轻量级框架集成了众多实用组件，极大简化了开发工作。利用 SpringBoot 强大的功能，我们可以轻松实现文件上传下载实时进度条功能。

亲自动手：实现步骤详解

第一步：导入依赖

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

第二步：定义 Controller

@Controller
public class FileController {

    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) {
        // ...省略文件上传代码
        return "redirect:/success";
    }

    @GetMapping("/download")
    public ResponseEntity<Resource> download(@RequestParam("file") String filename) {
        // ...省略文件下载代码
        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + filename + "\"")
                .body(new FileSystemResource(new File(filename)));
    }
}

第三步：前端页面集成进度条

HTML:

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
    <progress id="progress" value="0" max="100"></progress>
    <input type="submit" value="上传">
</form>

JavaScript:

$("#file").on("change", function() {
    var formData = new FormData();
    formData.append("file", $("#file")[0].files[0]);

    $.ajax({
        url: "/upload",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        xhr: function() {
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(e) {
                var progress = Math.round((e.loaded / e.total) * 100);
                $("#progress").val(progress);
            });
            return xhr;
        }
    });
});