大文件上传第二弹(分片、秒传、断点续传)

最新推荐文章于 2024-08-21 18:16:09 发布
最新推荐文章于 2024-08-21 18:16:09 发布
阅读量131 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/j7s9usu/article/details/86137656
版权
本文介绍了一种文件分块上传的实现方法，利用前端的file.slice()进行文件分块，通过FileReader获取每一块的md5值，后端使用MultipartFile接收并用FileOutputStream拼接。同时，详细描述了基于uuid的文件夹名称生成逻辑，确保文件夹结构与客户端保持一致。
摘要由CSDN通过智能技术生成

关键部分

前端用file.slice()分块

前端用FileReader获取每一分块的md5值

后端用MultipartFile接受分块文件

后端用FileOutputStream拼装分块文件

话不多说，直接上代码，我想这是你们最喜欢的

工程截图

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

String clientCookie = request.getHeader("Cookie");

%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

  <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>up6.2-MySQL演示页面</title>

    <link href="js/up6.css" type="text/css" rel="Stylesheet"/>

    <script type="text/javascript" src="js/jquery-1.4.min.js"></script>

    <script type="text/javascript" src="js/json2.min.js" charset="utf-8"></script>

    <script type="text/javascript" src="js/up6.config.js" charset="utf-8"></script>

    <script type="text/javascript" src="js/up6.app.js" charset="utf-8"></script>

    <script type="text/javascript" src="js/up6.edge.js" charset="utf-8"></script>

    <script type="text/javascript" src="js/up6.file.js" charset="utf-8"></script>

    <script type="text/javascript" src="js/up6.folder.js" charset="utf-8"></script>

    <script type="text/javascript" src="js/up6.js" charset="utf-8"></script>

    <script language="javascript" type="text/javascript">

    var cbMgr = new HttpUploaderMgr();

    cbMgr.event.md5Complete = function (obj, md5) { /*alert(md5);*/ };

     cbMgr.event.fileComplete = function (obj) { /*alert(obj.pathSvr);*/ };

    cbMgr.Config["Cookie"] = 'JSESSIONID=<%=request.getSession().getId()%>';

    cbMgr.Config.Fields["test"] = "test";

 

    $(function()

    {

         cbMgr.load_to("FilePanel");//加载控件

        });

    </script>

  </head>

 

  <body>

     <p>up6.2多文件上传演示页面</p>

     <div id="FilePanel"></div>

     <div id="msg"></div>

  </body>

</html>

 

文件MD5计算

     /**

      * 把文件转成md5字符串

      * @param file

      * @return

      */

     public static String fileToMD5(File file) {

         if(file == null) {

              return null;

         }

         if(file.exists() == false) {

              return null;

         }

         if(file.isFile() == false) {

              return null;

         }

         FileInputStream fis = null;

         try {

              //创建一个提供信息摘要算法的对象，初始化为md5算法对象

              MessageDigest md = MessageDigest.getInstance("MD5");

              fis = new FileInputStream(file);

              byte[] buff = new byte[1024];

              int len = 0;

              while(true) {

                   len = fis.read(buff, 0, buff.length);

                   if(len == -1){

                       break;

                   }

                   //每次循环读取一定的字节都更新

                   md.update(buff,0,len);

              }

              //关闭流

              fis.close();

              //返回md5字符串

              return bytesToHex(md.digest());

         } catch (Exception e) {

              e.printStackTrace();

         }

         return null;

     }

 

文件夹文件夹名称生成逻辑

package up6.biz;

import java.io.IOException;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.UUID;

import up6.model.FileInf;

public class PathBuilderUuid extends PathBuilder{

     /* 生成文件夹存储路径，完全与客户端文件夹结构保持一致

      * 格式：    

      *  upload/2016/05/17/uuid/folder_name

      * 更新记录：

      *  2016-03-01 upload/uid/folders/uuid/folder_name

      *   2016-05-17 将格式改为日期格式

      *

      */

     public String genFolder(int uid,String nameLoc) throws IOException

     {

         SimpleDateFormat fmtDD = new SimpleDateFormat("dd");

         SimpleDateFormat fmtMM = new SimpleDateFormat("MM");

         SimpleDateFormat fmtYY = new SimpleDateFormat("yyyy");

        

         Date date = new Date();

         String strDD = fmtDD.format(date);

         String strMM = fmtMM.format(date);

         String strYY = fmtYY.format(date);

        

         String uuid = UUID.randomUUID().toString();

         uuid = uuid.replace("-","");

        

         String path = this.getRoot() + "/";

         path = path.concat(strYY);

         path = path.concat("/");

         path = path.concat(strMM);

         path = path.concat("/");

         path = path.concat(strDD);

         path = path.concat("/");

        

         path = path.concat(uuid);

         path = path.concat("/");

         path = path.concat(nameLoc);

         return path;

     }

    

     /* 保留原始文件名称，不检查文件是否重复

      * 格式：

      *   upload/uid/年/月/日/uuid/file_name

      * @see Xproer.PathBuilder#genFile(int, Xproer.xdb_files)

      */

     public String genFile(int uid,FileInf f) throws IOException{

         String uuid = UUID.randomUUID().toString();

         uuid = uuid.replace("-", "");

        

 

         SimpleDateFormat fmtDD = new SimpleDateFormat("dd");

         SimpleDateFormat fmtMM = new SimpleDateFormat("MM");

         SimpleDateFormat fmtYY = new SimpleDateFormat("yyyy");

        

         Date date = new Date();

         String strDD = fmtDD.format(date);

         String strMM = fmtMM.format(date);

         String strYY = fmtYY.format(date);

        

         String path = this.getRoot() + "/";

         path = path.concat(strYY);

         path = path.concat("/");

         path = path.concat(strMM);

         path = path.concat("/");

         path = path.concat(strDD);

         path = path.concat("/");

         path = path.concat(uuid);

         path = path.concat("/");

         path = path.concat(f.nameLoc);

         return path;

     }

}

文件上传的效果

http://bbsres2.ncmem.com/4f09f40c.png

 

文件保存位置及逻辑

在up6中有两种保存模式，一种是md5一种是uuid。

md5由PathBuilderMd5生成存储路径。md5主要提供给文件使用，可在服务器端保存唯一的文件，有效避免重复文件。

uuid由PathBuilderUuid生成存储路径。uuid主要提供给文件夹使用，可以与本地文件夹结构完全保持一致。使用uuid模式上传文件夹时秒传功能会失效。

 

文件默认保存位置在项目路径下：

https://i-blog.csdnimg.cn/blog_migrate/9acafb71681f577355fade3d787246d4.png

demo会自动生成upload文件夹

规则：upload/年/月/日/md5

https://i-blog.csdnimg.cn/blog_migrate/4a771cc5adf203e8ebc7a4274535d66f.png

 

代码截图：

https://i-blog.csdnimg.cn/blog_migrate/100ac54f8f1db9090b0e1d8d21bbe7e8.png

 

https://i-blog.csdnimg.cn/blog_migrate/eadfa9887c7460746bc38f4b6ca48b91.png

 

https://i-blog.csdnimg.cn/blog_migrate/1942e271b6488deca401ed52bc33b990.png

 

文件逻辑：

https://i-blog.csdnimg.cn/blog_migrate/f5c2ae3235537bcfd141ebea3a1c9de8.png

生成文件服务器存储路径

https://i-blog.csdnimg.cn/blog_migrate/5ee8bd88593fd40b7a9c9c812b20698c.png

 

文件夹逻辑：

https://i-blog.csdnimg.cn/blog_migrate/3b56495caef3ab128b6303093f5c65f3.png

https://i-blog.csdnimg.cn/blog_migrate/262a0237e709ad9956f546853a011af3.png

生成文件夹存储路径

 

https://i-blog.csdnimg.cn/blog_migrate/29a17090665477ff15eba1bc5f3863f5.png

生成子文件路径

 

https://i-blog.csdnimg.cn/blog_migrate/9cb55873f0b7c550cb5ef64f78dddd97.png

生成子目录路径

 

https://i-blog.csdnimg.cn/blog_migrate/187be76acd0cf795c9e2ce1332de4afb.png

下载地址: http://c7.gg/cdpA6

就是那么的嗨
关注
第11课：多图上传与大文件分片上传、断点续传
程序员有故事
09-22 430
企业级应用一般都会包含图片及大文件分片上传功能。一些小型网站，当前可能并没有这些功能，但随着日后的成长，系统的不断升级，总归会有这些方面的功能需求。所以，对于有些读者来说，该文的内容即便现在暂时还用不上，也应该先提前了解下，以备日后之需。 本文将从为什么使用多图上传开始讲起，逐步分析多图、大文件上传的处理流程。结合着功能的实现、Demo 的演示及详细的流程分析，让大家知其然知其所以然。 WebUp...
React大文件分片上传方案
Kobe_G的博客
11-08 2570
大文件分片上传方案
大文件上传最全方案：秒传、断点续传、分片上传
最新发布
alisky119的博客
08-21 1115
该说不说，最近这块好像挻火的，今天早上又有网友加我微信，也是想了解一下这块的技术和方案，也不知道这位老哥是从哪里找到的我的微信号，虽然在网上已经公开了，但是很多人还是找不到。 昨天晚上论坛里一位网友发私信给我，咨询了这个问题，他最近想了解和学习大附件上传下载的相关技术，他也是刚开始学习和接触这一块，对很多方面都不是太了解，我先花了1个小时左右的时间先给他讲解了一下基础知识，技术原理，又花了一个小时的时间帮他安装开发环境，这位老哥刚重装了系统，基本上开发工具一个没装，主要就是安装开发工具和配置环境，由于在百度
React+Antd+Upload实现大文件分片上传
fankeweiii的博客
08-08 1997
React+Antd+Upload实现大文件分片上传
vue 自定义分片上传到七牛云带进度条
Rainy_X的博客
06-28 1302
前言 场景：vue环境，UI框架为Ant Design Ant Design中的Upload自带上传功能，但是当我上传超过1G的视频文件时，导致文件过大而超时 于是设置customRequest属性，通过覆盖默认的上传行为，可以自定义自己的上传实现 引入七牛SDK 直接使用静态文件地址：https://unpkg.com/qiniu-js@<version>/dist/qiniu.min.js 使用 NPM 安装 npm install qiniu-js， import * as qiniu
React实现大文件分片上传——详解基础版（用hooks进行封装）
m0_61644311的博客
04-26 1245
大文件上传的详细解读，每一行代码都有对应解释，手把手带你从构思到实现，完全理解
java源码包---java 源码 大量 实例
04-18
　用JAVA开发的一个小型的目录监视系统，系统会每5秒自动扫描一次需要监视的目录，可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历,...
【多文件上传效率提升】：管理多文件上传的高效策略
多文件上传功能是许多应用程序中的基础组成部分，尤其在内容管理系统（CMS）、文件共享服务和社交媒体平台中尤为常见。用户期望快速且无缝地上传大量文件，然而在实际操作中，这一过程往往伴随着多方面的挑战。包括...
【多文件上传处理】：构建支持同时上传多个文件的高效处理器
![【多文件上传处理】：构建支持同时上传多个文件的高效处理器]...多文件上传处理涉及前端与后端的协同工作，前端负责文件的选取、预览和上传，而后端则处理文件
获取文件的MD5值
qq_42173899的博客
08-05 760
用spring的MultipartFile对象接收，要将MultipartFile转化为File public String fileMd5(MultipartFile multipartFile){ File toFile = null; try { if(multipartFile.equals("")||multipartFile.getSize()<=0){ throw new Exception("文件不存在");
java Swing 上传文件
06-21
java Swing 上传文件-------------------------------------------------------------------------------------------------------------------------------------------------------
Java 小文件上传、大文件分片上传、断点续传、秒传的开发原理
weixin_45525177的博客
12-14 132
文件上传在项目开发中再常见不过了，大多项目都会涉及到图片、音频、视频、文件的上传，通常简单的一个Form表单就可以上传小文件了，但是遇到大文件时比如1GB以上，或者用户网络比较慢时，简单的文件上传就不能适用了，用户辛苦传了好几十分钟，到最后发现上传失败，这样的系统用户体验是非常差的。这里为什么要计算MD5简单说一下，因为文件在传输写入过程中可能会出现错误，导致最终合成的文件可能和原文件不一样，所以要对比一下前端计算的MD5和后端计算的MD5是不是一样，保证上传数据的一致性。
文件上传之秒传、断点续传、分片上传
Irons_one的博客
04-17 2122
在文件相对比较小的情况下，可以直接把文件转化为字节流上传到服务器，但在文件比较大的情况下，用普通的方式进行上传，当文件上传到一半中断后，继续上传却只能重头开始上传，这种让人不爽的体验。 1、秒传 通俗的说，你把要上传的东西上传，服务器会先做MD5校验，如果服务器上有一样的东西，它就直接给你个新地址，其实你下载的都是服务器上的同一个文件，想要不秒传，其实只要让MD5改变，就是对文件本身做一下修改（改名字不行），例如一个文本文件，你多加几个字，MD5就变了，就不会秒传了。 前端： // 生成文件标识，标识多次上
文件上传、切片上传、秒传等
李乐乐的博客
04-12 1345
切片上传与秒传方案总览理解的方案对比一次性文件上传如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 总览 浏览器情况下： 针对大文件上传，一次性传输文件会出现网络中断等情况。不会传输成功。 把大文件切分成多个二进制流格式切片进行多次传输。 如果上传过程中，遇到已经传输完成
springboot整合vue2-uploader文件分片上传、秒传、断点续传
林夕
05-06 3556
基于封装的vue上传插件。支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传可暂停、继续上传错误处理支持“秒传”，通过文件判断服务端是否已存在从而实现“秒传”分片上传支持进度、预估剩余时间、出错自动重试、重传等操作2：图片便于理解：秒传：（将文件使用MD5加密，生成一个串，我们拿到这个串到redis 中查看是否存在）
实现大文件分片上传与断点续传的PHP解决方案
资源摘要信息:"在介绍的资源标题中提到了使用php结合webuploader实现超大文件上传的技术方案，这个方案中包含分片上传、断点续传等功能，可有效处理20GB甚至更大文件的上传需求。在描述中详细介绍了实现这些功能所要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值