SpringBoot文件上傳

一、文件上傳簡介

文件上傳，是指我們把本地的文件上傳到伺服器上，以供其他用戶進行訪問、下載等操作。在Web應用的開發中，文件上傳是一個很需要注意的問題。SpringBoot為我們提供了很好的支持，為我們簡化了文件上傳的難度。下面分析一下SpringBoot如何實現文件上傳。

二、實現文件上傳

1.前端表單

在前端頁面上，需要設置一個form表單來進行文件上傳，這個表單中要設置一個<input type="file">元素，以供用戶進行文件選擇。

<form action="fileupload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <input type="submit" value="上傳文件" />
</form>

2.Controller層

在Controller層中，需要使用@RequestParam註解來獲取文件上傳的信息，再使用MultipartFile類來進行文件上傳。

@RestController
public class FileUploadController {
    
    @PostMapping("/fileupload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        String fileName = file.getOriginalFilename();
        File destFile = new File("D:/temp/" + fileName);
        try {
            file.transferTo(destFile);
            return "文件上傳成功！";
        } catch (IOException e) {
            e.printStackTrace();
            return "文件上傳失敗！";
        }
    }
}

3.配置文件

在application.properties或application.yml中，需要添加上傳文件的大小限制配置和上傳文件緩存的配置，以確保能夠成功上傳文件。

#文件上傳大小限制
spring.servlet.multipart.max-file-size=10MB
#設置上傳文件臨時存儲路徑
spring.servlet.multipart.location=D:/temp

三、實現文件上傳批量處理

1.前端表單

與單文件上傳類似，需要設置多個<input type="file">元素，以供用戶進行文件選擇，注意需要添加multiple屬性，才能夠同時選擇多個文件。

<form action="fileuploads" method="POST" enctype="multipart/form-data">
    <input type="file" name="files" multiple />
    <input type="submit" value="上傳文件" />
</form>

2.Controller層

在Controller層中，需要使用@RequestParam註解來獲取多個文件上傳的信息，此時獲取到的是一個數組，需要循環處理每一個文件。

@RestController
public class FileUploadController {
    
    @PostMapping("/fileuploads")
    public String handleFileUpload(@RequestParam("files") MultipartFile[] files) {
        StringBuilder sb = new StringBuilder();
        for (MultipartFile file : files) {
            String fileName = file.getOriginalFilename();
            File destFile = new File("D:/temp/" + fileName);
            try {
                file.transferTo(destFile);
                sb.append(fileName + " ");
            } catch (IOException e) {
                e.printStackTrace();
                return "文件上傳失敗！";
            }
        }
        return "文件" + sb.toString() + "上傳成功！";
    }
}

3.配置文件

與單文件上傳相同，需要在配置文件中配置上傳文件的大小限制和上傳文件緩存的位置。

#文件上傳大小限制
spring.servlet.multipart.max-file-size=10MB
#設置上傳文件臨時存儲路徑
spring.servlet.multipart.location=D:/temp

四、文件上傳進度條顯示

1.前端頁面

在前端頁面上，需要使用JavaScript代碼來處理文件上傳進度顯示，使用HTML5的XMLHttpRequest對象進行文件上傳。

function uploadFile() {
    var files = document.getElementById("formFile").files;
    var length = files.length;
    var data = new FormData();
    for (var i=0; i<length; i++) {
        data.append('files', files[i]);
    }
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/fileuploads', true);
    xhr.onload = function () {
        document.getElementById("progress").style.display = "none";
        alert("文件上傳完成！");
    };
    xhr.upload.onprogress = function (event) {
        var progress = document.getElementById("progress");
        if (event.lengthComputable) {
            progress.value = event.loaded/event.total*100;
        }
    };
    xhr.send(data);
}

2.Controller層

在Controller層中，需要設置@CrossOrigin註解來允許跨域請求，以便前端頁面能夠訪問到後端程序。

@RestController
@CrossOrigin
public class FileUploadController {
    
    @PostMapping("/fileuploads")
    public String handleFileUpload(@RequestParam("files") MultipartFile[] files) {
        StringBuilder sb = new StringBuilder();
        for (MultipartFile file : files) {
            String fileName = file.getOriginalFilename();
            File destFile = new File("D:/temp/" + fileName);
            try {
                file.transferTo(destFile);
                sb.append(fileName + " ");
            } catch (IOException e) {
                e.printStackTrace();
                return "文件上傳失敗！";
            }
        }
        return "文件" + sb.toString() + "上傳成功！";
    }
}

五、總結

本文詳細介紹了SpringBoot如何實現文件上傳及批量上傳，以及文件上傳進度條的顯示。了解了以上內容，相信大家都能夠成功地進行文件上傳！