• 【SpringBoot】文件分片上传、合并

    背景

    在上传大型文件时，一般采用的都是分片、断点续传等技术，这样不会导致因文件过大而造成系统超时或者过压等情况。

     接下来我们进入教学

    如果有帮助到您，麻烦请点击个收藏、赞，谢谢~

    一、实际效果图

    整个前端网页的效果图：

    二、后端代码

    1.开发环境

    开发工具：idea  ，开发语言：java  ，框架：springboot

    2.创建文件上传工具类

    创建工具类：FileUtils

    1.  
    2. import com.caozhen.common.constant.HttpStatusConstant;
    3. import org.springframework.stereotype.Component;
    4. import org.springframework.web.multipart.MultipartFile;
    5.  
    6. import java.io.*;
    7.  
    8.  
    9. /**
    10.  * @author caozhen
    11.  * @ClassName FileUtils
    12.  * @description: 文件上传
    13.  * @date 2023年10月07日
    14.  * @version: 1.0
    15.  */
    16. @Component
    17. public class FileUtils {
    18.     //文件路径，可以统一配置
    19.     private static final String UPLOAD_DIR = "d:\\uploads";
    20.  
    21.     /***
    22.      * 断点续传（上传文件）
    23.      * @param file
    24.      * @return
    25.      */
    26.     public ResultAjax resumeFile(MultipartFile file,
    27.                                  int chunkNumber,
    28.                                  int totalChunks,
    29.                                  String identifier) {
    30.         try {
    31.             File uploadDir = new File(UPLOAD_DIR);
    32.             if (!uploadDir.exists()) {
    33.                 uploadDir.mkdirs();
    34.             }
    35.  
    36.             String fileName = identifier + "-chunk-" + chunkNumber;
    37.             File chunkFile = new File(uploadDir, fileName);
    38.  
    39.             try (InputStream inputStream = file.getInputStream();
    40.                  FileOutputStream outputStream = new FileOutputStream(chunkFile)) {
    41.                 byte[] buffer = new byte[1024];
    42.                 int bytesRead;
    43.                 while ((bytesRead = inputStream.read(buffer)) != -1) {
    44.                     outputStream.write(buffer, 0, bytesRead);
    45.                 }
    46.             }
    47.  
    48.             if (chunkNumber == totalChunks - 1) {
    49.                 File finalFile = new File(UPLOAD_DIR + File.separator + identifier);
    50.                 for (int i = 0; i < totalChunks; i++) {
    51.                     File part = new File(uploadDir, identifier + "-chunk-" + i);
    52.                     try (FileInputStream partStream = new FileInputStream(part);
    53.                          FileOutputStream finalStream = new FileOutputStream(finalFile, true)) {
    54.                         byte[] buffer = new byte[1024];
    55.                         int bytesRead;
    56.                         while ((bytesRead = partStream.read(buffer)) != -1) {
    57.                             finalStream.write(buffer, 0, bytesRead);
    58.                         }
    59.                     }
    60.                     part.delete();
    61.                 }
    62.                 uploadDir.delete();
    63.             }
    64.  
    65.             return ResultAjax.ok("Chunk " + chunkNumber + " uploaded");
    66.         } catch (IOException e) {
    67.             e.printStackTrace();
    68.             return ResultAjax.error(HttpStatusConstant.HTTP_CODE_500, "上传失败：" + e.getMessage());
    69.         }
    70.     }
    71. }

    3.创建controller类

    1. @RestController
    2. @Slf4j
    3. @Api(tags = "系统服务")
    4. @RequestMapping("/sys/test/")
    5. public class SystemController {
    6.   
    7.     @Autowired
    8.     private FileUtils fileUtils;
    9.  
    10.  
    11.     @ApiOperation("测试文件断点续传-上传")
    12.     @RequestMapping(value = "/upload", method = RequestMethod.POST)
    13.     public ResultAjax fileUploads(@RequestParam("file") MultipartFile file,
    14.                                   @RequestParam("chunkNumber") int chunkNumber,
    15.                                   @RequestParam("totalChunks") int totalChunks,
    16.                                   @RequestParam("identifier") String identifier) {
    17.         return fileUtils.resumeFile(file,chunkNumber,totalChunks,identifier);
    18.     }
    19.  
    20. }

    4.自定义封装类ResultAjax

    1.  
    2. import java.util.HashMap;
    3. import java.util.LinkedHashMap;
    4. import java.util.Map;
    5.  
    6. /**
    7.  * @author caozhen
    8.  * @ClassName ResultAjax
    9.  * @description: 全局封装统一返回实体类
    10.  * @date 2023年07月26日
    11.  * @version: 1.0
    12.  */
    13. public class ResultAjax extends LinkedHashMap {
    14.     private static final long serialVersionUID = 1L;
    15.  
    16.     public ResultAjax() {
    17.         put("success", true);
    18.         put("code", HttpStatusConstant.HTTP_CODE_200);
    19.         put("msg", "操作成功！");
    20.         put("data", null);
    21.     }
    22.  
    23.     public ResultAjax(Integer code) {
    24.         put("success", true);
    25.         put("code", code);
    26.         put("msg", "操作成功！");
    27.         put("data", null);
    28.     }
    29.  
    30.     public ResultAjax(Integer code, String msg) {
    31.         put("success", true);
    32.         put("code", code);
    33.         put("msg", msg);
    34.         put("data", null);
    35.     }
    36.  
    37.     public static ResultAjax error() {
    38.         return error(HttpStatusConstant.HTTP_CODE_500, "未知异常，请联系管理员");
    39.     }
    40.  
    41.     public static ResultAjax errorDebug(String message) {
    42.         return error(HttpStatusConstant.HTTP_CODE_500, "未知异常 " + message + "，请联系管理员");
    43.     }
    44.  
    45.     public static ResultAjax error(String msg) {
    46.         return error(HttpStatusConstant.HTTP_CODE_500, msg);
    47.     }
    48.  
    49.  
    50.     public static ResultAjax error(int code, String msg) {
    51.         ResultAjax r = new ResultAjax();
    52.         r.put("success", false);
    53.         r.put("code", code);
    54.         r.put("msg", msg);
    55.         return r;
    56.     }
    57.  
    58.     public ResultAjax errorInfo(String msg) {
    59.         this.put("errorMsg", msg);
    60.         return this;
    61.     }
    62.  
    63.     public static ResultAjax ok(Object data) {
    64.         ResultAjax r = new ResultAjax();
    65.         r.put("success", true);
    66.         r.put("code", HttpStatusConstant.HTTP_CODE_200);
    67.         r.put("msg", "操作成功！");
    68.         r.put("data", data);
    69.         return r;
    70.     }
    71.  
    72.     public static ResultAjax ok(Map map) {
    73.         ResultAjax r = new ResultAjax();
    74.         r.putAll(map);
    75.         r.put("data", null);
    76.         return r;
    77.     }
    78.  
    79.     public static ResultAjax ok(String msg, Integer code) {
    80.         ResultAjax r = new ResultAjax();
    81.         r.put("success", true);
    82.         r.put("code", code);
    83.         r.put("msg", msg);
    84.         r.put("data", null);
    85.         return r;
    86.     }
    87.  
    88.     public static ResultAjax ok() {
    89.         return new ResultAjax().put("msg", "操作成功！").put("data", null);
    90.     }
    91.  
    92.     public static ResultAjax ok(Integer size) {
    93.         return new ResultAjax().put("data", null);
    94.     }
    95.  
    96.     @Override
    97.     public ResultAjax put(String key, Object value) {
    98.         super.put(key, value);
    99.         return this;
    100.     }
    101.  
    102.     /**
    103.      * 添加返回结果数据
    104.      *
    105.      * @param key
    106.      * @param value
    107.      * @return
    108.      */
    109.     public ResultAjax putData(String key, Object value) {
    110.         Map map = (HashMap) this.get("data");
    111.         map.put(key, value);
    112.         return this;
    113.     }
    114. }
    1. public class HttpStatusConstant {
    2.     //目前常用的，200,500
    3.     public final static Integer HTTP_CODE_200 = 200;
    4.     public final static Integer HTTP_CODE_500 = 500;
    5.     //拦截
    6.     public final static Integer HTTP_CODE_403 = 403;
    7.     public final static Integer HTTP_CODE_401 = 401;
    8. }

    三、前端代码

    1. html>
    2. <html>
    3. <head>
    4.     <title>文件分片上传title>
    5. head>
    6. <body>
    7.     <input type="file" id="fileInput">
    8.     <button id="startUpload">开始上传button>
    9.     <button id="pauseResumeUpload">暂停上传button>
    10.     <progress id="progress" max="100" value="0">progress>
    11.     <span id="progressText">0%span>
    12.     
    13.     <script>
    14.         const fileInput = document.getElementById('fileInput');
    15.         const startUpload = document.getElementById('startUpload');
    16.         const pauseResumeUpload = document.getElementById('pauseResumeUpload');
    17.         const progress = document.getElementById('progress');
    18.         const progressText = document.getElementById('progressText');
    19.         let file;
    20.         let uploading = false;
    21.         let currentChunk = 0;
    22.         let uploadPaused = false;
    23.         let xhr;
    24.  
    25.         fileInput.addEventListener('change', (event) => {
    26.             file = event.target.files[0];
    27.         });
    28.  
    29.         async function uploadFile() {
    30.             const chunkSize = 1 * 1024 * 1024; // 1MB
    31.             const totalChunks = Math.ceil(file.size / chunkSize);
    32.             
    33.             for (currentChunk; currentChunk < totalChunks; currentChunk++) {
    34.                 if (uploadPaused) {
    35.                     break;
    36.                 }
    37.  
    38.                 const startByte = currentChunk * chunkSize;
    39.                 const endByte = Math.min(startByte + chunkSize, file.size);
    40.                 const chunk = file.slice(startByte, endByte);
    41.  
    42.                 const formData = new FormData();
    43.                 formData.append('file', chunk);
    44.                 formData.append('chunkNumber', currentChunk);
    45.                 formData.append('totalChunks', totalChunks);
    46.                 formData.append('identifier', file.name);
    47.  
    48.                 const response = await fetch('http://localhost:8000/system/sys/test/upload', {
    49.                     method: 'POST',
    50.                     body: formData,
    51.                 });
    52.  
    53.                 if (response.status !== 200) {
    54.                     console.error('Error uploading chunk: ', response.statusText);
    55.                     break;
    56.                 }
    57.  
    58.                 const percent = ((currentChunk + 1) / totalChunks) * 100;
    59.                 progress.value = percent;
    60.                 progressText.textContent = `${Math.round(percent)}%`;
    61.             }
    62.  
    63.             if (currentChunk >= totalChunks) {
    64.                 alert('文件上传成功！');
    65.                 uploading = false;
    66.                 currentChunk = 0;
    67.                 progress.value = 100;
    68.                 progressText.textContent = '100%';
    69.             }
    70.         }
    71.  
    72.         startUpload.addEventListener('click', () => {
    73.             if (file && !uploading) {
    74.                 uploading = true;
    75.                 uploadFile();
    76.             }
    77.         });
    78.  
    79.         pauseResumeUpload.addEventListener('click', () => {
    80.             if (uploading) {
    81.                 if (!uploadPaused) {
    82.                     uploadPaused = true;
    83.                     pauseResumeUpload.textContent = '继续上传';
    84.                 } else {
    85.                     uploadPaused = false;
    86.                     pauseResumeUpload.textContent = '暂停上传';
    87.                     uploadFile();
    88.                 }
    89.             }
    90.         });
    91.     script>
    92. body>
    93. html>

    四、接下来我们演示下

    五、留言区

    有什么问题可以在底下评论区留言，看到会在本文后追加回复！

     

  • 相关阅读:
    2023年最新ADB工具箱R34下载-自带驱动常见ADB命令刷机ROOT神器
    Fiddler的安装及配置2-2
    内质网应激+预后模型新方向，干湿结合搞定5+sci
    TiDB ——TiKV
    gdb调试常见命令详细总结
    面对外部攻击威胁，怎样确保API安全
    李宁「向上」：不止缺一个FILA
    【Linux】VMware下载和安装
    Centos7宝塔部署python
    Linux下线程池（ThreadPool)
  • 原文地址：https://blog.csdn.net/qq_23126581/article/details/133642129