Java+Layui 实现大文件分片上传前后端代码示例

前端代码

引入 Layui 相关文件。
在页面中添加上传组件的 HTML 代码。
在 JS 代码中，调用 Layui 的 upload 组件，配置相关参数，实现大文件分片上传。

<!-- 引入 Layui 相关文件 -->
<script src='layui/layui.js'></script>
<link rel='stylesheet' href='layui/css/layui.css'>

<!-- 上传组件的 HTML 代码 -->
<div class='layui-upload'>
  <button type='button' class='layui-btn' id='test1'>选择文件</button>
  <div class='layui-upload-list'>
    <table class='layui-table'>
      <thead>
        <tr>
          <th>文件名</th>
          <th>大小</th>
          <th>状态</th>
          <th>操作</th>
        </tr> 
      </thead>
      <tbody id='demoList'></tbody>
    </table>
  </div>
  <button type='button' class='layui-btn' id='test2'>开始上传</button>
</div>

<!-- JS 代码 -->
<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/upload/' //上传接口
    ,accept: 'file' //允许上传的文件类型
    ,size: 1024*1024*10 //最大允许上传的文件大小
    ,multiple: true //是否允许多文件上传
    ,auto: false //选择文件后是否自动上传
    ,bindAction: '#test2' //指向开始上传按钮
    ,before: function(obj){ //上传前回调
      layer.msg('正在上传，请稍后...', {icon: 16, time: 0, shade: 0.4});
    }
    ,done: function(res){ //上传完毕回调
      layer.closeAll('loading');
      layer.msg('上传完成！', {icon: 1});
    }
    ,error: function(){ //请求异常回调
      layer.closeAll('loading');
      layer.msg('上传失败，请重试！', {icon: 2});
    }
    ,progress: function(n, elem){ //上传进度回调
      var percent = n + '%';
      element.progress('demo', percent);
    }
  });
});
</script>

后端代码

在后端接收上传请求时，对上传的文件进行分片处理，将分片文件存储到临时文件中。
在上传完成时，将所有分片文件合并成原始文件。
在上传过程中，需要处理上传进度的展示。

// 分片上传接口
@RequestMapping("/upload")
public ResponseResult upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws Exception {
    String fileName = file.getOriginalFilename();
    String filePath = "D:/upload/";

    // 创建临时文件夹
    File tmpFile = new File(filePath + "tmp/");
    if(!tmpFile.exists()){
        tmpFile.mkdirs();
    }

    // 分片处理
    long fileSize = file.getSize();
    long chunkSize = 1024 * 1024 * 5; // 分片大小为 5M
    long chunkNum = (long)Math.ceil((double)fileSize / chunkSize); // 总分片数
    String tmpFilePath = filePath + "tmp/" + fileName + "/";
    File tmpDir = new File(tmpFilePath);
    if(!tmpDir.exists()){
        tmpDir.mkdirs();
    }

    // 保存分片文件
    int index = Integer.parseInt(request.getParameter("index"));
    String chunkName = fileName + "_" + index;
    File chunkFile = new File(tmpFilePath + chunkName);
    file.transferTo(chunkFile);

    // 上传进度处理
    int percent = (int)(((double)index / (double)chunkNum) * 100);
    //TODO 前端上传进度展示

    // 返回结果
    return new ResponseResult(true, "上传成功！", null);
}

// 合并分片文件
@RequestMapping("/merge")
public ResponseResult merge(@RequestParam("fileName") String fileName, HttpServletRequest request) throws Exception {
    String filePath = "D:/upload/";

    // 创建目标文件夹
    String targetFilePath = filePath + "target/";
    File targetDir = new File(targetFilePath);
    if(!targetDir.exists()){
        targetDir.mkdirs();
    }

    // 获取分片文件列表
    String tmpFilePath = filePath + "tmp/" + fileName + "/";
    File tmpDir = new File(tmpFilePath);
    File[] files = tmpDir.listFiles();

    // 合并分片文件
    File targetFile = new File(targetDir.getPath() + File.separator + fileName);
    BufferedOutputStream outputStream = new BufferedOutputStream(new FileOutputStream(targetFile));
    for(File file : files){
        BufferedInputStream inputStream = new BufferedInputStream(new FileInputStream(file));
        byte[] buffer = new byte[1024];
        int len;
        while((len = inputStream.read(buffer)) != -1){
            outputStream.write(buffer, 0, len);
        }
        inputStream.close();
    }
    outputStream.close();

    // 删除临时文件夹
    tmpDir.delete();

    // 返回结果
    return new ResponseResult(true, "上传成功！", null);
}

注意：

代码示例中使用了 Layui 框架，需要自行引入相关的文件。
后端代码示例使用了 SpringMVC 框架，需要根据实际情况进行调整。
上传路径需要根据实际情况进行配置。
上传进度展示需要在前端代码中实现，可以通过 AJAX 请求获取后端返回的进度信息。
文件合并需要根据实际情况进行处理，例如可以将所有分片文件写入到同一个文件中。
该示例代码仅供参考，实际应用中可能需要根据具体的需求进行修改。