springboot 、html分片上传，断点续传-Toy模板网

这篇具有很好参考价值的文章主要介绍了springboot 、html分片上传，断点续传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

springboot 、html分片上传，断点续传

后端代码

	private String UPLOAD_URL = "F:/20230509/";
    private String UPLOAD_SUFFIX_URL = "/gsl/www/";
    public  String getUPLOAD_URL() {
        return UPLOAD_URL + UPLOAD_SUFFIX_URL;
    }

    @PostMapping("/o_upload")
    public Result upload1(@RequestParam("file") MultipartFile multipartFile,
                          @RequestParam("fileName") String fileName,
                          @RequestParam("chunkNumber") int chunkNumber,
                          @RequestParam("totalChunks") int totalChunks) throws IOException {
        UserDetail user = SecurityUser.getUser();
        String originalFileName = StringUtils.cleanPath(multipartFile.getOriginalFilename());
        String fileExtension = getFileExtension(originalFileName);
        String uniqueFileName = fileName + "_" + chunkNumber + "." + fileExtension;
        Path uploadPath = Paths.get(this.getUPLOAD_URL());
        if (!Files.exists(uploadPath)) {
            Files.createDirectories(uploadPath);
        }
        Path filePath = Paths.get(this.getUPLOAD_URL() + uniqueFileName);
        Files.write(filePath, multipartFile.getBytes());
        if (chunkNumber == totalChunks - 1) {
            return mergeChunks(fileName, totalChunks, fileExtension, user.getId());
        } else {
            return new Result().error("上传失败");
        }
    }
    private String getFileExtension(String fileName) {
        int dotIndex = fileName.lastIndexOf(".");
        if (dotIndex > 0) {
            return fileName.substring(dotIndex + 1);
        } else {
            return "";
        }
    }

    /**
     * 合并分片
     * @param fileName
     * @param totalChunks
     * @param fileExtension
     * @param userId
     * @return
     * @throws IOException
     */
    private Result mergeChunks(String fileName, int totalChunks, String fileExtension, Long userId) throws IOException {
        Path mergedFilePath = Paths.get(this.getUPLOAD_URL() + fileName + "." + fileExtension);
        if (!Files.exists(mergedFilePath)) {
            Files.createFile(mergedFilePath);
        }
        for (int i = 0; i < totalChunks; i++) {
            Path chunkFilePath = Paths.get(this.getUPLOAD_URL() + fileName + "_" + i + "." + fileExtension);
            Files.write(mergedFilePath, Files.readAllBytes(chunkFilePath), StandardOpenOption.APPEND);
            Files.delete(chunkFilePath);
        }
        Path filePath = Paths.get(this.getUPLOAD_URL() + fileName);
        File file = new File(filePath.toString());
        // 原文件名称
        String extension = file.getName().substring(0, file.getName().lastIndexOf("."));
        // 后缀
        String suffix = "." + file.getName().substring(file.getName().lastIndexOf(".") + 1);
        // 新的文件名称
        String newFileName = System.currentTimeMillis() + suffix;
        // 文件重命名
        File renamedFile = new File(file.getParent(), newFileName);
        file.renameTo(renamedFile);
        // 文件路径：/gsl/cms/1683616117391.zip
        String resourceUrl = UPLOAD_SUFFIX_URL + newFileName;
        // 可保存到数据库
        Map<String, Object> map = new HashMap<>();
        map.put("url", resourceUrl);
        return new Result().ok(map);
    }

注意：合并分片代码中：
Files.write(mergedFilePath, Files.readAllBytes(chunkFilePath), StandardOpenOption.APPEND);文章来源地址https://www.toymoban.com/news/detail-445821.html

如果不设置该值`StandardOpenOption.APPEND`，无法打开合并后的文件

前端代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>File Upload Test</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button onclick="uploadFile()">Upload</button>

    <script>
        function uploadFile() {
            const file = document.getElementById("fileInput").files[0];
            const url = "/upload/o_upload";
            const chunkSize = 1024 * 1024; // 每个块的大小（字节）
            const fileSize = file.size; // 文件的总大小
            const totalChunks = Math.ceil(fileSize / chunkSize); // 文件被分成的总块数

            let chunkNumber = 0; // 当前上传的块的编号
            let startByte = 0; // 当前上传块的起始字节位置
            let endByte = chunkSize; // 当前上传块的结束字节位置（不包括）

            uploadChunk();

            function uploadChunk() {
                const chunk = file.slice(startByte, endByte); // 获取当前上传块的内容
                const formData = new FormData(); // 创建FormData对象

                // 将参数添加到FormData对象中
                formData.append("file", chunk);
                formData.append("chunkNumber", chunkNumber);
                formData.append("totalChunks", totalChunks);
                formData.append("fileName", file.name);
                formData.append("fileSize", fileSize);

                // 创建XMLHttpRequest对象
                const xhr = new XMLHttpRequest();
                xhr.open("POST", url, true);

                // 监听XMLHttpRequest对象的事件
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        // 上传成功，继续上传下一块
                        chunkNumber++;
                        startByte = endByte;
                        endByte = Math.min(startByte + chunkSize, fileSize);
                        if (startByte < fileSize) {
                            uploadChunk();
                        } else {
                            // 所有块上传成功
                            console.log("Upload completed");
                        }
                    } else {
                        // 上传失败，尝试重传当前块
                        console.error(xhr.statusText);
                        setTimeout(uploadChunk, 1000);
                    }
                };

                xhr.onerror = function() {
                    // 网络错误，尝试重传当前块
                    console.error(xhr.statusText);
                    setTimeout(uploadChunk, 1000);
                };

                // 发送POST请求
                xhr.send(formData);
            }
        }
    </script>
</body>
</html>