• 文件分片上传

    概要

    在日常开发中上传文件是常见的功能，像使用 SpringBoot 作为服务端接收上传的文件是很方便的，但是默认情况下 SpringBoot 为我限定了单次上传文件的大小，默认是1MB，当我们单次上传的大小超过1MB的时候就会报错，这时候我们可以通过修改上传大小限制来解决这个问题，主要是这两个属性：

    • spring.servlet.multipart.max-file-size
    • spring.servlet.multipart.max-request-size

    但是这对于小型项目或者能确定每次上传的文件大小大概范围的可以，对于大型项目和不确定文件大小的项目这样的操作显然不适用，试想一下，如果你设置为了100MB，那假如有100个人同时上传文件，项目的内存不就GG了吗？因此通用稳妥的解决方法是分片上传，例如上传一个100MB的文件我们可以将这个文件先分割为100分1MB的文件，然后分别上传这100份就可以了，当然这里分片的大小要根据你的服务器配置自行调节，并不是越小越好，这样既解决了文件限制大小，而且可以利用多线程更快的进行上传。

    实现过程

    在实现前我们首先要考虑好，如何让服务端知道多次请求上传的文件是同一个文件的分片？你可能会想让前端在发送时生成一个uid，然后每个分片上传时都携带这个uid，然后服务端在进行文件合并的时候通过这个来判断，这个思路是正确的，那这个uid怎么生成呢？这里我们可以使用 spark-md5.js 来为文件生成一个唯一的hash值，这样既可以区分分片文件也可以在后续进行文件下载时进行文件的校验，因为一个文件的hash值是固定的，只要文件被修改那么hash值就会发生改变。

    但是计算文件的hash值对于小文件我们可以直接计算，但是对于大文件，我们就要分片计算然后合并，这个过程也不用担心，spark-md5.js 里有现成的方法。因此，现在大概的流程就是：选择文件，然后将文件进行分片，在分片的同时计算每一个分片的hash值，然后分片完成后合并hash获取到完整文件的hash，最后遍历分片构造上传FormData进行上传请求。

    文件的分片可以使用 JavaScript 的 slice(file, start, end) 方法实现，这里再说一下 start 和 end 参数的确定，我们先定义几个变量：

    • chunks：表示分片的数量，这个是文件大小除以分片大小向下取整，可以通过Math.ceil()方法得到。
    • currentChunk：当前chunk索引，初始值设为0
    • chunkSize：分片的大小，本文中设置为了1MB

    start 的值是 currentChunk*chunkSize 确定 end 参数时有两种情况：

    1. start+chunkSize >= file.size 时 end 为 file.size
    2. start+chunkSize < file.size 时 end 为 start + chunkSize

    前端完整代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <title>文件分片上传/下载测试title>
    7.   <script src="./js/jquery.min.js">script>
    8.   <script src="./js/spark-md5.min.js">script>
    9.   <style>
    10.     html,
    11.     body {
    12.       width: 100%;
    13.       height: 100vh;
    14.       margin: 0;
    15.     }
    16.  
    17.     header {
    18.       height: 30px;
    19.       display: flex;
    20.       align-items: center;
    21.       margin: 0;
    22.       padding: 10px;
    23.       background-color: #333;
    24.       color: white;
    25.     }
    26.  
    27.     header>h1 {
    28.       font-size: 18px;
    29.     }
    30.  
    31.     main {
    32.       height: calc(100% - 100px);
    33.     }
    34.  
    35.     .uploadBox {
    36.       height: 100%;
    37.       display: flex;
    38.       padding: 10px;
    39.       font-size: 14px;
    40.     }
    41.   style>
    42. head>
    43.  
    44. <body>
    45.   <header>
    46.     <h1>文件分片上传测试页面h1>
    47.   header>
    48.   <main>
    49.     <div class="uploadBox" id="upload-box">
    50.       <div class="chooseFile">
    51.         <label for="file">选择文件：label>
    52.         <button id="selectFile">选择文件button>
    53.         <div class="fileInfo">
    54.           <p id="fileName">文件名称：p>
    55.           <p id="fileSize">文件大小：p>
    56.           <label for="chunkSize">分片大小：label><input value="1024" id="chunkSize" type="number" placeholder="分片大小"><span>
    57.             kbspan>
    58.         div>
    59.         <input hidden type="file" id="file">
    60.         <button style="width: 100%; margin-top:10px;">开始上传button>
    61.         <p id="uploadInfo">p>
    62.       div>
    63.     div>
    64.   main>
    65.   <script>
    66.     $(document).ready(function () {
    67.       $('#selectFile').click(() => {
    68.         $('#file').click();
    69.       });
    70.       $('#file').change(async (e) => {
    71.         var chunkSize = $('#chunkSize').val() * 1024;
    72.         if (chunkSize == 0) {
    73.           alert('分片大小不可以为0')
    74.           return;
    75.         }
    76.         var file = e.target.files[0]
    77.         $('#fileSize').append(Math.ceil(file.size / 1024) + ' kb')
    78.         $('#fileName').append(file.name)
    79.         //进行文件分割并上传
    80.         sliceFileAndUpload(e.target.files, chunkSize)
    81.       })
    82.     });
    83.  
    84.     function sliceFileAndUpload(files, chunkSize) {
    85.       var filePartList = [];
    86.       var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
    87.         file = files[0],
    88.         chunks = Math.ceil(file.size / chunkSize),
    89.         currentChunk = 0,
    90.         spark = new SparkMD5.ArrayBuffer(),
    91.         fileReader = new FileReader();
    92.       fileReader.onload = e => {
    93.         spark.append(e.target.result);
    94.         currentChunk++;
    95.         if (currentChunk < chunks) {
    96.           loadNext();
    97.         } else {
    98.           var uid = spark.end();
    99.           filePartList.forEach(item => {
    100.             let formData = new FormData();
    101.             formData.append('file', item.filePart);
    102.             formData.append('uid', uid);
    103.             formData.append('currentIndex', item.currentIndex);
    104.             formData.append('fileName', file.name);
    105.             $.ajax({
    106.               url: '/file/uploadBySlice',
    107.               method: 'POST',
    108.               data: formData,
    109.               processData: false,
    110.               contentType: false,
    111.               success: function (e) {
    112.                 console.log(e)
    113.                 $('#uploadInfo').append(e + "
      "      )
    114.               }
    115.             })
    116.           })
    117.           alert('上传完成，请到测试文件夹验证文件是否正确')
    118.         }
    119.       }
    120.       fileReader.onerror = () => {
    121.         console.log('文件读取处理发生错误')
    122.       }
    123.       function loadNext() {
    124.         var temp = {}
    125.         var start = currentChunk * chunkSize,
    126.           end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
    127.         let filePart = blobSlice.call(file, start, end);
    128.         temp.currentIndex = start;
    129.         temp.filePart = filePart;
    130.         filePartList.push(temp);
    131.         fileReader.readAsArrayBuffer(filePart);
    132.       }
    133.       loadNext();
    134.     }
    135.   script>
    136. body>
    137.  
    138. html>

    由于是测试项目，前端的样式没有过多的美化，见谅。

    服务端的代码就比较简单了，由于要进行文件的拼接，因此需要使用 RandomAccessFile 来进行文件的操作，因为它可以在指定的位置插入内容，它的 seek 就是这个作用，你可以把它看为一个指针，每次在插入文内容前先将这个指针拨到我们想要的位置，然后进行插入。

    服务端代码

    1. package vip.huhailong.slicefile.controller;
    2.  
    3. import org.springframework.beans.factory.annotation.Value;
    4. import org.springframework.web.bind.annotation.PostMapping;
    5. import org.springframework.web.bind.annotation.RequestMapping;
    6. import org.springframework.web.bind.annotation.RestController;
    7. import org.springframework.web.multipart.MultipartFile;
    8.  
    9. import java.io.File;
    10. import java.io.IOException;
    11. import java.io.RandomAccessFile;
    12.  
    13. @RestController
    14. @RequestMapping("/file")
    15. public class FileController {
    16.  
    17.   @Value("${upload.dir}")
    18.   private String uploadDir;
    19.  
    20.   @PostMapping("/uploadBySlice")
    21.   public String uploadBySlice(MultipartFile file, String fileName, String uid, long currentIndex) throws IOException {
    22.     mkdirUploadDir();
    23.     String filePath = uploadDir + uid+"-"+fileName;
    24.     try (RandomAccessFile accessFile = new RandomAccessFile(filePath, "rw")) {
    25.       accessFile.seek(currentIndex);
    26.       System.out.println("Thread name:"+Thread.currentThread().getName()+";currentIndex:" + currentIndex + "; fileSize:" + file.getBytes().length);
    27.       accessFile.write(file.getBytes());
    28.       return "Thread name:"+Thread.currentThread().getName()+";currentIndex:" + currentIndex + "; fileSize:" + file.getBytes().length;
    29.     }
    30.   }
    31.  
    32.   private void mkdirUploadDir() {
    33.     File uploadDirFile = new File(uploadDir);
    34.     if (!uploadDirFile.exists()) {
    35.       boolean mkdirs = uploadDirFile.mkdirs();
    36.       if (!mkdirs) {
    37.         throw new RuntimeException("创建上传目录失败");
    38.       }
    39.     }
    40.   }
    41. }

    测试截图

    测试截图
    测试截图

    以上就是分片上传文件的简单实现，可以在此基础上增加更多的附加功能，本文中的代码对应的代码仓库地址：

    slicefile: 分片上传测试Demo

  • 相关阅读:
    【概率论与数理统计】第二章知识点复习与习题
    13天搞定python分布式爬虫（视频+项目双管齐下）
    【生成式人工智能-九-大型语言模型的幻觉、偏见等安全性问题】
    部署lamp
    uniapp开发笔记----发布成微信小程序体验版本
    实现http流式输出的最小实践
    Springboot流浪狗领养管理系统毕业设计源码260839
    nvm管理不同版本nodejs
    vue3+antdv 表格封装
    springboot+vue+Elementui共享单车管理系统
  • 原文地址：https://blog.csdn.net/hhl18730252820/article/details/132635554