Spring Boot 集成阿里云和腾讯云实现分片上传

最新推荐文章于 2024-10-17 10:11:42 发布
最新推荐文章于 2024-10-17 10:11:42 发布
阅读量835 收藏 28
点赞数 25
文章标签： spring boot 阿里云 腾讯云
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64264364/article/details/142327355
版权

前端Demo(html文件)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分片上传测试</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.0/spark-md5.min.js"></script>
</head>
<body>
    <h2>分片上传视频</h2>
    <input type="file" id="fileInput" />
    <button onclick="handleUpload()">上传视频</button>

    <div id="progress-container" style="margin-top: 20px; width: 100%; background-color: #f3f3f3; height: 20px; border-radius: 5px; overflow: hidden;">
        <div id="progress-bar" style="width: 0%; height: 100%; background-color: #4caf50;"></div>
        <span id="progress-text">0%</span>
    </div>

    <script>
        const CHUNK_SIZE = 5 * 1024 * 1024; // 每个分片5MB
        const uploadProgress = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');

        // 处理文件上传
        async function handleUpload() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            if (!file) {
                alert('请选择一个文件！');
                return;
            }

            const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
            let chunkIndex = 0;

            // 上传文件的每个分片
            for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
                const start = chunkIndex * CHUNK_SIZE;
                const end = Math.min(start + CHUNK_SIZE, file.size);
                const chunk = file.slice(start, end); // 获取文件片段

                // 计算分片的 MD5
                const md5 = await calculateChunkMD5(chunk);

                // 创建FormData并上传分片
                const formData = new FormData();
                formData.append('videoFile', chunk, file.name);
                formData.append('chunkIndex', chunkIndex);
                formData.append('totalChunks', totalChunks);
                formData.append('fileName', file.name);
                formData.append('md5', md5);  // 添加 MD5 值

                try {
                    await uploadChunk(formData, chunkIndex + 1, totalChunks);
                    updateProgress((chunkIndex + 1) / totalChunks);
                } catch (error) {
                    console.error('分片上传失败: ', error);
                    alert('上传失败，请检查控制台日志。');
                    break;
                }
            }

            alert('视频上传成功！');
        }

        // 上传单个分片
        async function uploadChunk(formData, chunkIndex, totalChunks) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open('POST', 'http://localhost:7081/admin/api/courses/uploadVideo', true);

                xhr.onload = function () {
                    if (xhr.status === 200) {
                        console.log(`分片 ${chunkIndex}/${totalChunks} 上传成功`);
                        resolve();
                    } else {
                        console.error(`分片 ${chunkIndex}/${totalChunks} 上传失败, 状态码: `, xhr.status);
                        console.error('响应: ', xhr.responseText);  // 打印服务器响应
                        reject(new Error(`上传失败，状态码: ${xhr.status}`));
                    }
                };

                xhr.onerror = function () {
                    console.error(`分片 ${chunkIndex}/${totalChunks} 上传时发生错误`);
                    reject(new Error('网络错误，无法连接服务器'));
                };

                xhr.send(formData);
            });
        }

        // 计算每个分片的 MD5
        async function calculateChunkMD5(chunk) {
            return new Promise((resolve) => {
                const reader = new FileReader();
                reader.onload = (e) => {
                    const spark = new SparkMD5.ArrayBuffer();
                    spark.append(e.target.result);
                    const md5 = spark.end();
                    resolve(md5);
                };
                reader.readAsArrayBuffer(chunk);
            });
        }

        // 更新进度条
        function updateProgress(progress) {
            const percent = Math.round(progress * 100);
            uploadProgress.style.width = percent + '%';
            progressText.innerText = percent + '%';
        }
    </script>
</body>
</html>

后端代码
引入依赖，这里我用的阿里云的OSS的客户端（虽然back桶是在腾讯云上，但是好像也可以用。为什么没用腾讯云，是因为之前版本腾讯云的依赖更新了，报错appid懒得去看解决，就暂时用的阿里云的）。
业务主体代码

 @PostMapping("/uploadVideo")
    @ResponseBody
    public Result<String> uploadVideoChunk(@RequestPart MultipartFile videoFile, // 视频文件
                                           @RequestParam("chunkIndex") int chunkIndex, // 分片索引
                                           @RequestParam("totalChunks") int totalChunks, // 分片总数
                                           @RequestParam("fileName") String fileName, // 文件名
                                           @RequestParam("md5") String md5, // 文件MD5
                                           HttpServletRequest request) {

        try {
            // Step 1: 计算接收到的分片的 MD5，并与前端提供的 MD5 进行比较
            try (InputStream inputStream = videoFile.getInputStream()) {
                String calculatedMd5 = DigestUtils.md5Hex(inputStream);

                // 比较前端发送的 MD5 与后端计算的 MD5
                if (!calculatedMd5.equals(md5)) {
                    return Result.error("MD5 校验失败，分片数据不一致");
                }
            }

            // Step 2: 获取OSS配置，使用缓存并处理多线程安全
            Set set = cacheUtil.get(CacheNameConst.OSS, "OSS", Set.class);
            if (set == null) {
                synchronized (this) {  // 加锁
                    // 从数据库中获取配置信息并放入缓存
                    set = setService.getOne(new LambdaQueryWrapper<Set>().eq(Set::getKey, "OSS"));
                    if (set == null) {
                        cacheUtil.put(CacheNameConst.OSS, "OSS", "数据库没有数据");
                    } else {
                        // 将配置信息放入缓存
                        cacheUtil.put(CacheNameConst.OSS, "OSS", set);
                    }

                }
            }

            if (set == null) {
                return Result.error("未配置OSS");
            }

            OssSetDTO ossSetDTO = JSONUtil.toBean(set.getValues(), OssSetDTO.class);
            TXOssSetDTO dto = ossSetDTO.getTxOssSetDTO();

            // Step 3: 定义临时存储目录，用于保存分片文件
            String tempDirPath = System.getProperty("java.io.tmpdir") + "/upload_chunks/";
            File tempDir = new File(tempDirPath);
            if (!tempDir.exists()) {
                tempDir.mkdirs();  // 创建临时存储目录
            }

            // Step 4: 临时存储每个分片的文件
            String chunkFileName = tempDirPath + fileName + ".part" + chunkIndex;
            File chunkFile = new File(chunkFileName);
            videoFile.transferTo(chunkFile);  // 保存分片文件
            // 将文件名字转换成二进制
            String fileNameBytes = convertStringToBytes(fileName);
            // Step 5: 检查是否所有分片都已上传完毕
            if (allChunksUploaded(tempDirPath, fileName, totalChunks)) {
                // 合并分片
                String mergedFilePath = tempDirPath + fileName;
                // 合并分片
                mergeChunks(tempDirPath, fileName, totalChunks, mergedFilePath);
                String name = fileNameBytes + ".mp4";

                // 上传合并后的文件到OSS
                String objectName = "videos/" + name;
                OSS ossClient = new OSSClientBuilder().build(dto.getEndpoint(), dto.getSecretId(), dto.getSecretKey());

                try (FileInputStream inputStream = new FileInputStream(new File(mergedFilePath))) {
                    ossClient.putObject(dto.getBucketName(), objectName, inputStream);
                    log.info("视频上传成功");

                    // 清理临时文件
                    deleteTempFiles(tempDirPath, fileName, totalChunks);
                    deleteTempFiles(tempDirPath, fileName + ".mp4", totalChunks);

                    return Result.data(dto.getPrefix() + "/" + objectName);  // 返回视频URL
                } catch (OSSException oe) {
                    log.error("OSSException: " + oe.getErrorMessage());
                    return Result.error(201, "请检查OSS配置");
                } catch (ClientException ce) {
                    log.error("ClientException: " + ce.getMessage());
                    return Result.error(201, "请检查OSS配置");
                }
            }
            return Result.data("分片" + chunkIndex + "上传成功");

        } catch (IOException e) {
            log.error("Error calculating MD5", e);
            return Result.error("MD5 计算错误，分片上传失败");
        } catch (Exception e) {
            log.error("上传视频分片时发生错误: " + e.getMessage(), e);
            return Result.error("视频分片上传失败");
        }
    }


再来看视频文件代码

这是本地缓存的

其他代码


    // 检查是否所有分片都已上传完毕
    private boolean allChunksUploaded(String tempDirPath, String fileName, int totalChunks) {
        for (int i = 0; i < totalChunks; i++) {
            File partFile = new File(tempDirPath + fileName + ".part" + i);
            if (!partFile.exists()) {
                return false;
            }
        }
        return true;
    }

    // 合并分片
    private void mergeChunks(String tempDirPath, String fileName, int totalChunks, String mergedFilePath) throws
            IOException {
        try (BufferedOutputStream mergedStream = new BufferedOutputStream(new FileOutputStream(mergedFilePath, true))) {
            for (int i = 0; i < totalChunks; i++) {
                File partFile = new File(tempDirPath + fileName + ".part" + i);
                try (BufferedInputStream partStream = new BufferedInputStream(new FileInputStream(partFile))) {
                    byte[] buffer = new byte[32768]; // 大文件时这个就可以设置大些 一般是1024
                    int bytesRead;
                    while ((bytesRead = partStream.read(buffer)) != -1) {
                        // 将分片内容写入合并文件
                        mergedStream.write(buffer, 0, bytesRead);
                    }
                }
            }
        }
    }

    // 删除临时文件
    private void deleteTempFiles(String tempDirPath, String fileName, int totalChunks) {
        for (int i = 0; i < totalChunks; i++) {
            File partFile = new File(tempDirPath + fileName + ".part" + i);
            if (partFile.exists()) {
                partFile.delete();
            }
        }
        File mergedFile = new File(tempDirPath + fileName);
        if (mergedFile.exists()) {
            mergedFile.delete();
        }
    }

  
    // 将名字转换成二进制数组
    // 这里是为了解决上传到COS上面，判断是新增视频还是将原来的视频覆盖掉做更新处理
    public String convertStringToBytes(String fileName) {
        try {
            // 使用 UTF-8 字符编码将字符串转换为字节数组
            return fileName.getBytes("UTF-8").toString();
        } catch (UnsupportedEncodingException e) {
            // 如果字符编码不支持，抛出异常
            e.printStackTrace();
            return null;
        }
    }

我们再调用这个接口，就可以使用分片上传这个功能了

看打印日志，ok，接口调用成功了。

楠Zz
关注
后端架构演进：从单体应用到服务网格
最新发布
AI天才研究院
10-19 555
本文将探讨后端架构的演变过程，从传统的单体应用到现代的微服务架构，再到服务网格技术的兴起。我们将详细解析这些架构模式的核心概念、优势与挑战，并通过实际案例展示如何在项目中应用这些技术。文章还将讨论服务网格的部署与运维策略，以及未来的发展趋势，帮助读者理解后端架构的演进方向，并掌握服务网格的相关技能。服务网格是一种基础设施层，主要负责服务的通信和监控。它通过一系列边车代理（sidecar proxies）来实现服务间的通信，并提供一系列高级功能，如服务发现、服务路由、负载均衡和安全等。
springboot+阿里云OSS分片上传、断点续传、秒传
qq_43040552的博客
03-09 7080
阿里云OSS分片上传
springboot实现阿里云视频点播技术----上传视频到阿里云视频点播存储起来
u014496893的博客
01-23 1094
一、开通阿里云视频点播 根据api文档引入对应的的sdk的依赖 <dependency> <groupId>com.aliyun</groupId> <artifactId>aliyun-java-sdk-vod</artifactId> </dependency> <dependency> <groupId>com.aliyun</groupId> <artifa
SpringBoot整合阿里云OSS文件上传
7
10-17 425
在项目开发中，很多涉及到存储文件的业务点，用的最多的就是上传图片了，由于不想自己创建文件服务器，那我们可以考虑使用阿里云的oss对象存储OSS对象存储对象存储服务（Object Storage Service，简称 OSS）为您提供基于网络的数据存取服务。使用 OSS，您可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种非结构化数据文件。
SpringBoot 2.0 整合阿里云OSS
湖人•总冠军
10-24 676
前言 现在很多网站/应用都采用了动静分离的架构进行部署。 主机采用的是阿里云的 ECS，使用 CDN 做静态内容分发，不过静态文件还是存储在 ECS，采用的是 Nginx 做动静分离。 简介 阿里云 OSS，海量、安全、低成本、高可靠的云存储服务，提供99.9999999999%的数据可靠性。使用RESTful API 可以在互联网任何位置存储和访问，容量和处理能力弹性扩展，多种存储类...
SpringBoot通过OSS实现大文件分片上传
专注基础架构领域
01-29 4249
最近工作中有使用到OSS的分片上传API，整体流程就是前端将大文件进行分割，每个分片大小是5MB，分片个数是：(文件大小/分片大小)，前端多线程处理上传分片到后端，后端接收到分片后调用OSS验证是否存在接口校验之前有没有传输过（后端集群式部署的时候这个步骤非常关键），如果分片在OSS上不存在则调用分片上传API进行上传，所有分片上传完成后调用OSS分片合并API，将所有分片在OSS上合并为我们最初的大文件，特此记录便于日后查阅。 注：本文只介绍后端分片校验、上传、整合部分，前端大文件分割代码请移步另一篇文
Springboot对接oss文件实现分片上传
qq_47283939的博客
03-01 889
java实现文件分片上传
前后端分离项目知识汇总（阿里云Oss，EasyExcel，视频点播，SpringCloud，Redis，Nuxt）
m0_67402235的博客
06-21 1057
全栈开发流程以下是response对象的属性和方法所以说，response就是代表接口返回的数据在看我们后端定义的接口这样功能就实现了补充下分页条实现方式分页条因为我分页条和表单在同一页面，所以写在同一组件下因为我分页条和表单在同一页面，所以写在同一组件下主要是js对象和java对象的问题，注意区分即可其余的也是直接用element-ui组件直接拿过来改改数据有了查询对象之后把查询对象传入我们写的获取讲师列表即可我们在查询按钮绑定方法测试3、定义增加API4、引入js，写vue页面5、测试6、补充增加和修改
Spring Boot中的文件上传与下载处理
Spring Boot的设计理念是"约定优于配置"，通过自动配置和约定，可以极大地减少开发者的配置工作量，从而提高开发效率。 Spring Boot具有以下特性： - 简化的配置：Spring Boot提供了一些简化配置的机制，如自动配置...
对象存储OSS云存储
weixin_41274719的博客
01-19 2806
一.阿里云OSS云存储简介 1.什么是阿里云oss云存储 阿里云对象存储服务（Object Storage Service，简称 OSS），是阿里云提供的海量、安全、低成 本、高可靠的云存储服务。其数据设计持久性不低于 99.9999999999%（12 个 9），服务设计可用性 （或业务连续性）不低于 99.995%。 可以使用阿里云提供的 API、SDK 接口或者 OSS 迁移工具轻松地将海量数据移入或移出阿里云 OSS。 数据存储到阿里云 OSS 以后，可以选择标准存储（Sta
springboot整合ssm
xyj_5201314的博客
06-23 2205
SpringBoot SSM整合
全网最详细SpringBoot、SpringCloud整合阿里云OSS对象存储服务
weixin_55076626的博客
11-18 2518
/创建OSSClient实例//创建存储空间//关闭OSSClient}}
java springboot 切割分片上传大文件
热门推荐
qq_34874784的博客
10-25 1万+
公司要做一个上传文件的功能，浏览器上传超过500m的文件会崩溃 需要切割分片上传 前端用的百度的 webuploader插件 官网http://fex.baidu.com/webuploader/ 用的springboot 打开后页面为这样 上传文件，我上传的事一个338m的文件，切割为每个32m的文件 上传后，切割为11份， 上传成功后，合并11文件为一个文件，并将......
spring boot 集成oss 上传图片、文件
wonder_dog的博客
07-22 6089
前排声明： 本文章 整合修改自https://blog.csdn.net/hcjsjqjssm/article/details/80977735 博客 一是自己以后回顾，二希望可以帮助到使用此功能的同学，假使帮助到了你，可以点个赞，留个言，如果有不成功的 也可以留言 一起解决下 提示：上传工具类的日志打印 你要换掉 现在maven pom导入oss的依赖 &amp;amp;amp;amp;lt;depen...
SpringBoot整合阿里云OSS上传文件，多线程分片上传，普通上传，文件删除
qq_45381772的博客
06-14 2499
SpringBoot整合阿里云OSS上传文件，多线程分片上传
SpringBoot整合阿里云OSS上传文件
小四是个程序猿的博客
05-27 4765
一、需求分析 文件上传是一个非常常见的功能，就是通过IO流将文件写到另外一个地方，这个地方可以是项目下的某个文件夹里，或者是本地电脑某个盘下面，还可以是云服务OSS里面，这里就是我要讲到的OSS，我写的是基于阿里云的。 二：环境搭建 我这里是用的Springboot.Thymeleaf插件，为了在html页面实现文件上传功能。 1、首先开通阿里云OSS存储，这里不多说了。 2、创建一个Bucket 这个bucket名称是等下参数里面要用到的。区域可以选择你那边的区域。 3、创建好之后返回刚才的页面，点击
SpringCloud整合阿里云oss
thciwei的博客
12-19 1945
作者Gitee地址 https://gitee.com/thciweicloud 作者项目 面包博客，一个微服务架构的前后端分离博客系统。 面包博客一直想要高效的管理图片资源，为了节约服务器资源，可以选择阿里云OSS存储，并且它和SpringCloud Alibaba又是天然融合 服务流程：用户将图片等资源传到服务器，服务器接收处理后再传给我们的阿里云OSS存储，但这样势必会带来大量的流量带宽消耗；所以有了第二种方式，通过policy策略，也就是提前获取签名的方式，将文件资源和签名共同提交给OSS进行验证
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值