1.分片上传技术

为了处理大文件上传并保证性能，前后端可以使用分片上传（也称为分块上传）技术。

1.选择原因

分片上传（也称为分块上传）是一种处理大文件上传的技术，主要目的是提高上传的可靠性和效率。
网络稳定性和可靠性：
断点续传：在上传大文件时，网络中断是一个常见的问题。如果没有分片上传，整个文件上传过程必须重新开始，这样不仅浪费时间，还增加了失败的可能性。而分片上传允许在网络恢复后从中断的地方继续上传，从而提高了上传的可靠性。
错误恢复：上传过程中，如果某个分片上传失败，只需重新上传这个分片，而不需要重新上传整个文件。
资源管理：
内存消耗：上传大文件时，如果一次性读取整个文件，会占用大量内存，甚至可能导致内存溢出。而分片上传每次只读取和上传一个小块，内存消耗更可控。
带宽优化：分片上传可以更好地利用带宽资源，特别是在网络不稳定的情况下，分片上传可以避免带宽的浪费。
大文件支持：
文件大小限制：一些浏览器和服务器对单个文件的上传大小有限制。通过分片上传，可以绕过这些限制，使上传大文件成为可能。
服务器处理压力：一次性上传大文件会给服务器带来很大的压力，分片上传可以减轻服务器的负担，因为服务器可以逐片处理和存储文件。

2.前端处理

1.文件分片：将大文件分成多个小块，每个块的大小可以根据需求设定。
2.上传分片：逐个上传分片，每个分片上传成功后上传下一个分片。
3.上传进度：可以通过计算已上传分片的大小来展示上传进度。
4.合并分片：所有分片上传完成后，通知后端合并分片。

3.后端处理

1.接收分片：后端接收每个分片并存储。
2.合并分片：在接收到所有分片后，将分片合并成完整文件。
3.处理上传进度和失败重传：记录上传进度，支持失败重传。

2.整合particles.js

particles.js 是一个轻量级的 JavaScript 库，用于在网页上创建交互性和美观的粒子效果。它能够生成各种各样的粒子动画，例如气泡、雪花、星星等，并且可以响应用户的鼠标移动和点击事件，增加网页的动态效果和吸引力。

1.主要特性

  • 轻量级：particles.js 体积小，加载速度快。
  • 高效：使用 HTML5 的 canvas 元素进行渲染，性能优越。
  • 高度可定制：提供丰富的配置选项，可以自定义粒子的数量、颜色、形状、大小、速度等。
  • 交互性：支持鼠标事件，例如悬停和点击，从而实现粒子的交互效果。
  • 响应式：能够适应不同屏幕大小，确保在各种设备上的显示效果。

2.安装与使用

1. 引入 particles.js

你可以通过 CDN 或者下载文件的方式引入 particles.js。

使用 CDN:

<!-- 使用 CDN 引入 -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

下载文件:

你可以从 GitHub 下载 particles.js 文件，并将其放置在项目中，然后使用以下方式引用：

<script src="path/to/particles.min.js"></script>
2. 创建粒子容器

在 HTML 中创建一个容器，用于显示粒子效果：

<div id="particles-js"></div>
3. 初始化 particles.js

在 JavaScript 中初始化 particles.js 并进行配置：

<script>
particlesJS('particles-js', {
                "particles": {
                    "number": {
                        "value": 80,//粒子数量
                        "density": {
                            "enable": true,
                            "value_area": 800 //粒子活动区域
                        }
                    },
                    "color": {
                        "value": "#333333" //粒子颜色
                    },
                    "shape": {
                        "type": "circle", //粒子形状
                        "stroke": { //粒子的描边
                            "width": 0,
                            "color": "#000000"
                        },
                        "polygon": {
                            "nb_sides": 5
                        }
                    },
                    "opacity": { //粒子透明度
                        "value": 0.5,
                        "random": false,
                        "anim": {
                            "enable": false, //是否开启
                            "speed": 1,//动画速度
                            "opacity_min": 0.1,
                            "sync": false
                        }
                    },
                    "size": {
                        "value": 5,
                        "random": true,
                        "anim": {
                            "enable": false,
                            "speed": 40,
                            "size_min": 0.1,
                            "sync": false
                        }
                    },
                    "line_linked": {//粒子之间的连线配置
                        "enable": true,//是否开启连线
                        "distance": 150,//连线距离
                        "color": "#333333",//连线的颜色
                        "opacity": 0.4,
                        "width": 1 //连线宽度
                    },
                    "move": {
                        "enable": true, //粒子是否移动
                        "speed": 6,//粒子移动速度
                        "direction": "none",//粒子移动方向
                        "random": true,//是否随机移动
                        "straight": false,//是否直线移动
                        "out_mode": "out",
                        "bounce": false,//是否开启碰撞弹跳
                        "attract": {
                            "enable": false,
                            "rotateX": 600,
                            "rotateY": 1200
                        }
                    }
                },
                "interactivity": {
                    "detect_on": "canvas",
                    "events": {
                        "onhover": {//鼠标悬浮效果
                            "enable": true,
                            "mode": "repulse"
                        },
                        "onclick": {//鼠标点击效果
                            "enable": true,
                            "mode": "push"
                        },
                        "resize": true
                    },
                    "modes": {
                        "grab": {
                            "distance": 400,
                            "line_linked": {
                                "opacity": 1
                            }
                        },
                        "bubble": {
                            "distance": 400,
                            "size": 40,
                            "duration": 2,
                            "opacity": 8,
                            "speed": 3
                        },
                        "repulse": {
                            "distance": 200,
                            "duration": 0.4
                        },
                        "push": {
                            "particles_nb": 4
                        },
                        "remove": {
                            "particles_nb": 2
                        }
                    }
                },
                "retina_detect": true //是否启动视网膜屏检测
            });
</script>

3.配置选项

  • number: 粒子的数量及密度。
  • color: 粒子的颜色。
  • shape: 粒子的形状，可以是 circle（圆形）、edge（边缘）、triangle（三角形）、polygon（多边形）或 image（图片）。
  • opacity: 粒子的透明度。
  • size: 粒子的大小。

具体的配置可以在Github中查看，如下所示：
在这里插入图片描述

3.前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload with Particles.js Background</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            z-index: 1;
            position: relative;
        }

        h1 {
            color: #333;
        }

        input[type="file"] {
            margin: 10px 0;
        }

        button {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #0056b3;
        }

        progress {
            width: 100%;
            height: 20px;
            margin-top: 10px;
            border-radius: 4px;
        }

        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
        }
    </style>
    <!-- 使用 CDN 引入 -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</head>
<body>
    <div id="particles-js"></div>
    <div class="container">
        <h1>File Upload</h1>
        <input type="file" id="fileInput" />
        <button onclick="uploadFile()">Upload</button>
        <progress id="progressBar" value="0" max="100"></progress>
    </div>

    <script>
        particlesJS('particles-js', {
                "particles": {
                    "number": {
                        "value": 80,//粒子数量
                        "density": {
                            "enable": true,
                            "value_area": 800 //粒子活动区域
                        }
                    },
                    "color": {
                        "value": "#333333" //粒子颜色
                    },
                    "shape": {
                        "type": "circle", //粒子形状
                        "stroke": { //粒子的描边
                            "width": 0,
                            "color": "#000000"
                        },
                        "polygon": {
                            "nb_sides": 5
                        }
                    },
                    "opacity": { //粒子透明度
                        "value": 0.5,
                        "random": false,
                        "anim": {
                            "enable": false, //是否开启
                            "speed": 1,//动画速度
                            "opacity_min": 0.1,
                            "sync": false
                        }
                    },
                    "size": {
                        "value": 5,
                        "random": true,
                        "anim": {
                            "enable": false,
                            "speed": 40,
                            "size_min": 0.1,
                            "sync": false
                        }
                    },
                    "line_linked": {//粒子之间的连线配置
                        "enable": true,//是否开启连线
                        "distance": 150,//连线距离
                        "color": "#333333",//连线的颜色
                        "opacity": 0.4,
                        "width": 1 //连线宽度
                    },
                    "move": {
                        "enable": true, //粒子是否移动
                        "speed": 6,//粒子移动速度
                        "direction": "none",//粒子移动方向
                        "random": true,//是否随机移动
                        "straight": false,//是否直线移动
                        "out_mode": "out",
                        "bounce": false,//是否开启碰撞弹跳
                        "attract": {
                            "enable": false,
                            "rotateX": 600,
                            "rotateY": 1200
                        }
                    }
                },
                "interactivity": {
                    "detect_on": "canvas",
                    "events": {
                        "onhover": {//鼠标悬浮效果
                            "enable": true,
                            "mode": "repulse"
                        },
                        "onclick": {//鼠标点击效果
                            "enable": true,
                            "mode": "push"
                        },
                        "resize": true
                    },
                    "modes": {
                        "grab": {
                            "distance": 400,
                            "line_linked": {
                                "opacity": 1
                            }
                        },
                        "bubble": {
                            "distance": 400,
                            "size": 40,
                            "duration": 2,
                            "opacity": 8,
                            "speed": 3
                        },
                        "repulse": {
                            "distance": 200,
                            "duration": 0.4
                        },
                        "push": {
                            "particles_nb": 4
                        },
                        "remove": {
                            "particles_nb": 2
                        }
                    }
                },
                "retina_detect": true //是否启动视网膜屏检测
            });
        const CHUNK_SIZE = 1024 * 1024; // 1MB per chunk

        async function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
            // 将大文件分片上传
            for (let i = 0; i < totalChunks; i++) {
                const start = i * CHUNK_SIZE;
                const end = Math.min(start + CHUNK_SIZE, file.size);
                const chunk = file.slice(start, end);
                const formData = new FormData();
                formData.append('chunkFile', chunk);
                formData.append('index', i);
                await fetch('http://127.0.0.1:8080/upload', {
                    method: 'POST',
                    body: formData
                });
                document.getElementById('progressBar').value = (i + 1) / totalChunks * 100;
            }

            // Notify server to merge chunks
            await fetch('http://127.0.0.1:8080/merge', {
                method: 'POST',
                body: JSON.stringify({ fileName: file.name }),
                headers: { 'Content-Type': 'application/json' }
            });
        }
    </script>
</body>
</html>

对应的界面效果如下所示：

在这里插入图片描述

4.后端代码

1.创建一个SpringBoot项目（模块）

在这里插入图片描述
后面只需要导入Spring Web模块即可！
这里创建项目或者模块后，如果发现maven始终无法下载对应的依赖，那就需要更新maven的镜像仓库配置。
可以找到maven中的conf目录下的setting.xml文件，修改里面的mirror标签的内容，具体如下所示：

<mirror>
    <!--This sends everything else to /public -->
    <id>nexus-aliyun</id>
    <mirrorOf>*</mirrorOf>
    <name>Nexus aliyun</name>
    <url>http://maven.aliyun.com/nexus/content/groups/public</url>
</mirror>

在这里插入图片描述

2.文件上传配置

需要在resources下的application.properties写一些配置项，来保证文件的正常上传等功能！具体如下所示：

spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

3.控制层代码

这里在类的层级下通过 @CrossOrigin 设置的跨域，也可以通过写配置文件在全局设置跨域！

package com.xing.bigfileuploaddemo.controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.file.Files;
import java.util.Map;

@RestController
@CrossOrigin
public class BigFileUploadController {
    // 获取资源文件夹的路径
    private static final String UPLOAD_DIR = System.getProperty("user.dir") + "/upload/";
    @GetMapping("/hello")
    public String hello(){
        return "hello BigFileUpload";
    }


    @PostMapping("/upload")
    public String uploadChunk(@RequestParam("chunkFile") MultipartFile chunkFile,
                                              @RequestParam("index") int index) {
        File uploadDir = new File(UPLOAD_DIR);
        if (!uploadDir.exists()) {
            uploadDir.mkdirs();
        }
        File file = new File(UPLOAD_DIR + "chunk_" + index);
        try {
            chunkFile.transferTo(file);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        return ("Chunk " + index + " uploaded");
    }

    @PostMapping("/merge")
    public String mergeChunks(@RequestBody Map<String, String> request) throws FileNotFoundException {
        String filename = request.get("fileName");
        File mergedFile = new File(UPLOAD_DIR + filename);
        try (FileOutputStream fos = new FileOutputStream(mergedFile)) {
            for(int i=0;;i++){
                File chunkFile = new File(UPLOAD_DIR + "chunk_" + i);
                if(!chunkFile.exists()){
                    break;
                }
                Files.copy(chunkFile.toPath(), fos);
                chunkFile.delete();
            }
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        return "File merged successfully";
    }
}
# java
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊