前后端实现分片上传超大文件

于 2020-11-03 11:26:24 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/allen_csdns/article/details/109465688
本文介绍了一种使用前端和后端配合完成超大文件分片上传的方法，通过前端将大文件切割为小块，然后逐个上传到后端进行合并，确保了上传的稳定性和效率。详细讲解了前端的切片逻辑和后端的接收、合并过程，适用于处理大文件上传的场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端原代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS分片上传-极速上传</title>
</head>
<body>
    <input type="file" name="slice" id="slice" >
  
    <div id="output"><!--  信息存放地  --> </div>
<br/>
</body>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $("#slice").change(function(event) {
        var file = $("#slice")[0].files[0];
		var name = file.name;
				//进行初始化
				$.ajax({  
		                type:"POST", //请求方式 
		                url:"http://localhost:8080/getuploadId",
						async: false,
		                dataType:"json", //返回数据类型
		                data:{//请求参数
		               		fileName:name,
		                },
		                success:function(data){ //请求成功后		                	
		                	console.log("data.code="+JSON.stringify(data));
							console.log("data.data.objectName="+data.data.objectName);
							console.log("data.data.uploadId="+data.data.uploadId);		
							var objectName=data.data.objectName;
							var uploadId=data.data.uploadId;
							//成功后执行分段上传
							PostFile(file,0,objectName,uploadId);
							//合并
							combineFile(objectName,uploadId);
							
							
						 },
		                error:function (){
		                	alert("系统出现异常！");
		                	flag=false;
		                }    
					}); 
		
        
    });
    //执行分片上传
    function PostFile(file,i,objectName,uploadId){
        var name = file.name,                           //文件名
            size = file.size,                           //总大小shardSize = 2 * 1024 * 1024,
            shardSize = 1 * 1024 * 1024,                //以2MB为一个分片,每个分片的大小
            shardCount = Math.ceil(size / shardSize);   //总片数
        if(i >= shardCount){
            return;
        }
        //console.log(size,i+1,shardSize);  //文件总大小，第一次，分片大小//
        var start = i * shardSize;
        var end = start + shardSize;
        var packet = file.slice(start, end);  //将文件进行切片
		// 分段号
		var partNumber = i + 1;
        /*  构建form表单进行提交  */
        var form = new FormData();
        form.append("fileId", '001')
        form.append("data", packet); //slice方法用于切出文件的一部分
//         form.append("lastModified", file.lastModified); //最后的额修改时间
        form.append("name", name);
        form.append("totalSize", size);
		
		form.append("uploadId", uploadId);
		form.append("objectName", objectName);
		form.append("mainFile", packet);
		form.append("total", shardCount);
		form.append("sortNumber", partNumber);
		
		//uploadId:uploadId,
		//objectName:objectName,
		//mainFile:blob,
		//total:partCount,
		//sortNumber:partNumber
		
        if(shardCount === i+1){
            shardSize = size - i * shardSize
        }
        form.append("shardSize", shardSize);
        form.append("total", shardCount); //总片数
        form.append("index", i + 1); //当前是第几片
        $.ajax({
          //  header: {
          //      web_token: "cpBvqWrr0UK9zPJoKj+412alxxcY6qFwrSVoO0juZg0S1jX/sGfMd9oi3AsSxW+MdWFrwtGCykUTmMqrqpbCElmT75DfB87lENC7lCuMxgF0d5wQB6yAubUVyGOzhbrScvIfD8ZSjOJ3D88AOy2xRd4oG8TxeGoMoZqnqIwjKg="
          //  },
            url: "http://localhost:8080/multipartupload",
            type: "POST",
            data: form,
            //timeout:"10000",  //超时10秒
            async: false, //同步
            dataType:"json",
            processData: false, //很重要，告诉jquery不要对form进行处理
            contentType: false, //很重要，指定为false才能形成正确的Content-Type
            success: function (data) {
                console.log("data="+JSON.stringify(data));
                /*  表示上一块文件上传成功，继续下一次  */
                if (data.data.code == 1) {
                    form = '';
                    i++;
                    PostFile(file, i,objectName,uploadId);
                } else if (data.data.code == 502) {
                    form = '';
                    /*  失败后，每2秒继续传一次分片文件  */
                    setInterval(function () { PostFile(file, i,objectName,uploadId) }, 2000);
                } else if (data.data.code == 200) {
                    console.log("上传成功");
                } else if (data.data.code == 500) {
                    console.log('第'+msg.i+'次，上传文件有误！');
                } else {
                    console.log('未知错误');
                }
            }
        })
    }
	//合并
	function combineFile(objectName,uploadId){
			console.log("objectName="+objectName);
			console.log("uploadId="+uploadId);
			var object=new Object();
			object.objectName=objectName;
			object.uploadId=uploadId;
			 $.ajax({  
				    
                    headers: {
						Accept: "application/json; charset=utf-8"
				},
					type:"POST", //请求方式 
					url:"http://localhost:8080/combine",
					async: false,
					contentType:"application/json",
					dataType:"json", //返回数据类型
					data:JSON.stringify(object),
					success:function(data){ //请求成功后		                	
						console.log("data="+JSON.stringify(data));
						console.log("data.data.code="+data.data.code);
						console.log("data.data.url="+data.data.url);		
					},
					error:function (){
						alert("系统出现异常！");
						flag=false;
					}    
				}); 					
	
	
	}
	
</script>
</html>

后端代码：

public class FileInf {

     public FileInf(){}

     public String id="";

     public String pid="";

    public String pidRoot="";   

     /**  * 表示当前项是否是一个文件夹项。    */

     public boolean fdTask=false;        

     //   /// 是否是文件夹中的子文件  /// </summary>

     public boolean fdChild=false;

     /**  * 用户ID。与第三方系统整合使用。    */

     public int uid=0;

     /**  * 文件在本地电脑中的名称   */

     public String nameLoc="";

     /**  * 文件在服务器中的名称。   */

     public String nameSvr="";

     /**  * 文件在本地电脑中的完整路径。示例：D:\Soft\QQ2012.exe */

     public String pathLoc="";  

     /**  * 文件在服务器中的完整路径。示例：F:\\ftp\\uer\\md5.exe     */

     public String pathSvr="";

     /**  * 文件在服务器中的相对路径。示例：/www/web/upload/md5.exe   */

     public String pathRel="";

     /**  * 文件MD5    */

     public String md5="";

     /**  * 数字化的文件长度。以字节为单位，示例：120125    */

     public long lenLoc=0;

     /**  * 格式化的文件尺寸。示例：10.03MB   */

     public String sizeLoc="";

     /**  * 文件续传位置。  */

     public long offset=0;

     /**  * 已上传大小。以字节为单位 */

     public long lenSvr=0;

     /**  * 已上传百分比。示例：10%  */

     public String perSvr="0%";

     public boolean complete=false;

     public Date PostedTime = new Date();

     public boolean deleted=false;

     /**  * 是否已经扫描完毕，提供给大型文件夹使用，大型文件夹上传完毕后开始扫描。  */

     public boolean scaned=false;

}

 

首先是文件数据接收逻辑，负责接收控件上传的文件块数据，然后写到服务器的文件中。控件已经提供了块的索引，大小，MD5和长度信息，我们可以根据需要来灵活进行处理，也可以将文件块的数据保存到分布式存储系统中。

<%

out.clear();

String uid             = request.getHeader("uid");//

String id              = request.getHeader("id");

String lenSvr      = request.getHeader("lenSvr");

String lenLoc      = request.getHeader("lenLoc");

String blockOffset = request.getHeader("blockOffset");

String blockSize   = request.getHeader("blockSize");

String blockIndex  = request.getHeader("blockIndex");

String blockMd5        = request.getHeader("blockMd5");

String complete        = request.getHeader("complete");

String pathSvr         = "";

 

//参数为空

if(  StringUtils.isBlank( uid )

     || StringUtils.isBlank( id )

     || StringUtils.isBlank( blockOffset ))

{
     XDebug.Output("param is null");

     return;

}

 

// Check that we have a file upload request

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

FileItemFactory factory = new DiskFileItemFactory();  

ServletFileUpload upload = new ServletFileUpload(factory);

List files = null;

try

{
     files = upload.parseRequest(request);

}

catch (FileUploadException e)

{// 解析文件数据错误 

    out.println("read file data error:" + e.toString());

    return;

  

}

 

FileItem rangeFile = null;

// 得到所有上传的文件

Iterator fileItr = files.iterator();

// 循环处理所有文件

while (fileItr.hasNext())

{
     // 得到当前文件

     rangeFile = (FileItem) fileItr.next();

     if(StringUtils.equals( rangeFile.getFieldName(),"pathSvr"))

     {
         pathSvr = rangeFile.getString();

         pathSvr = PathTool.url_decode(pathSvr);

     }

}

 

boolean verify = false;

String msg = "";

String md5Svr = "";

long blockSizeSvr = rangeFile.getSize();

if(!StringUtils.isBlank(blockMd5))

{
     md5Svr = Md5Tool.fileToMD5(rangeFile.getInputStream());

}

 

verify = Integer.parseInt(blockSize) == blockSizeSvr;

if(!verify)

{
     msg = "block size error sizeSvr:" + blockSizeSvr + "sizeLoc:" + blockSize;

}

 

if(verify && !StringUtils.isBlank(blockMd5))

{
     verify = md5Svr.equals(blockMd5);

     if(!verify) msg = "block md5 error";

}

 

if(verify)

{
     //保存文件块数据

     FileBlockWriter res = new FileBlockWriter();

     //仅第一块创建

     if( Integer.parseInt(blockIndex)==1) res.CreateFile(pathSvr,Long.parseLong(lenLoc));

     res.write( Long.parseLong(blockOffset),pathSvr,rangeFile);

     up6_biz_event.file_post_block(id,Integer.parseInt(blockIndex));

    

     JSONObject o = new JSONObject();

     o.put("msg", "ok");

     o.put("md5", md5Svr); 

     o.put("offset", blockOffset);//基于文件的块偏移位置

     msg = o.toString();

}

rangeFile.delete();

out.write(msg);

%>

 

文件初始化部分

<%

out.clear();

WebBase web = new WebBase(pageContext);

String id     = web.queryString("id");

String md5         = web.queryString("md5");

String uid         = web.queryString("uid");

String lenLoc      = web.queryString("lenLoc");//数字化的文件大小。12021

String sizeLoc     = web.queryString("sizeLoc");//格式化的文件大小。10MB

String callback = web.queryString("callback");

String pathLoc     = web.queryString("pathLoc");

pathLoc            = PathTool.url_decode(pathLoc);

 

//参数为空

if ( StringUtils.isBlank(md5)

     && StringUtils.isBlank(uid)

     && StringUtils.isBlank(sizeLoc))

{
     out.write(callback + "({\"value\":null})");

     return;

}

 

FileInf fileSvr= new FileInf();

fileSvr.id = id;

fileSvr.fdChild = false;

fileSvr.uid = Integer.parseInt(uid);

fileSvr.nameLoc = PathTool.getName(pathLoc);

fileSvr.pathLoc = pathLoc;

fileSvr.lenLoc = Long.parseLong(lenLoc);

fileSvr.sizeLoc = sizeLoc;

fileSvr.deleted = false;

fileSvr.md5 = md5;

fileSvr.nameSvr = fileSvr.nameLoc;

 

//所有单个文件均以uuid/file方式存储

PathBuilderUuid pb = new PathBuilderUuid();

fileSvr.pathSvr = pb.genFile(fileSvr.uid,fileSvr);

fileSvr.pathSvr = fileSvr.pathSvr.replace("\\","/");

 

DBConfig cfg = new DBConfig();

DBFile db = cfg.db();

FileInf fileExist = new FileInf();

    

boolean exist = db.exist_file(md5,fileExist);

//数据库已存在相同文件，且有上传进度，则直接使用此信息

if(exist && fileExist.lenSvr > 1)

{
     fileSvr.nameSvr             = fileExist.nameSvr;

     fileSvr.pathSvr        = fileExist.pathSvr;

     fileSvr.perSvr              = fileExist.perSvr;

     fileSvr.lenSvr              = fileExist.lenSvr;

     fileSvr.complete       = fileExist.complete;

     db.Add(fileSvr);

    

     //触发事件

    up6_biz_event.file_create_same(fileSvr);

}//此文件不存在

else

{
     db.Add(fileSvr);

     //触发事件

    up6_biz_event.file_create(fileSvr);

    

     FileBlockWriter fr = new FileBlockWriter();

     fr.CreateFile(fileSvr.pathSvr,fileSvr.lenLoc);

}

 

Gson gson = new Gson();

String json = gson.toJson(fileSvr);

 

json = URLEncoder.encode(json,"UTF-8");//编码，防止中文乱码

json = json.replace("+","%20");

json = callback + "({\"value\":\"" + json + "\"})";//返回jsonp格式数据。

out.write(json);%>

 

第一步：获取RandomAccessFile,随机访问文件类的对象

第二步：调用RandomAccessFile的getChannel()方法，打开文件通道 FileChannel，这块逻辑可以优化，如果以后有分布式存储需求，可以改为分布式存储，减轻单台服务器的压力。

public class FileBlockWriter {  

     public FileBlockWriter(){} 

     public void CreateFile(String pathSvr,long lenLoc)

     {
         try

         {
              File ps = new File(pathSvr);

              PathTool.createDirectory(ps.getParent());

             

             RandomAccessFile raf = new RandomAccessFile(pathSvr, "rw");

             raf.setLength(lenLoc);//fix:以原始大小创建文件

             raf.close();

 

         } catch (IOException e) {
              // TODO Auto-generated catch block

              e.printStackTrace();

         }       

     }

    

     public void write(long offset,String pathSvr,FileItem block)

     {       

         try

         {
              InputStream stream = block.getInputStream();           

              byte[] data = new byte[(int)block.getSize()];

              stream.read(data);

              stream.close();            

             

              RandomAccessFile raf = new RandomAccessFile(pathSvr,"rw");

              raf.seek(offset);

              raf.write(data);

              raf.close();

             

         } catch (IOException e) {
              // TODO Auto-generated catch block

              e.printStackTrace();

         }

     }

}

第三步：获取当前是第几个分块，计算文件的最后偏移量

第四步：获取当前文件分块的字节数组，用于获取文件字节长度

第五步：使用文件通道FileChannel类的 map（）方法创建直接字节缓冲器  MappedByteBuffer

第六步：将分块的字节数组放入到当前位置的缓冲区内  mappedByteBuffer.put(byte[] b);

第七步：释放缓冲区

第八步：检查文件是否全部完成上传

在这里插入图片描述

文件夹扫描类

在这里插入图片描述

存储路径生成类

在这里插入图片描述

allen_csdns
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值