大文件上传----webuploader分片上传

最新推荐文章于 2022-04-11 07:56:10 发布

原创

最新推荐文章于 2022-04-11 07:56:10 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#文件上传 #webuploader

本文介绍了使用WebUploader前端插件实现大文件分片上传的详细步骤。首先，前端通过设定chunkSize进行分片并逐片上传，服务器端接收并暂存每片。所有分片上传完成后，服务器进行合并。遇到的挑战包括超时问题，通过设置超时时间为0来解决。未来计划实现断点续传和秒传功能。

参考：https://www.zhangshengrong.com/p/O3aAyoKa4E/

https://www.jianshu.com/p/1fab52f45fb3

https://blog.youkuaiyun.com/u014150463/article/details/74044467/

https://www.cnblogs.com/hackxiyu/p/8203400.html

https://blog.youkuaiyun.com/qq_34698126/article/details/54429721#

webuploder API:http://fex.baidu.com/webuploader/doc/#WebUploader_Uploader_upload

需求：上传大文件资源以及一些基础信息存储到数据库

实现思路：分为2大步：

一：通过webuploader前端插件分页上传到服务器，服务器合页

二：上传完成，设置文件字段名称，再普通表单提交，存储信息到数据库

难点：一步具体实现：

前端页面——分页上传：

1，导入webuploader的css，js文件

ps：使用webuploader插件，必须要导入的文件：如果没有jq.js会报错：Uncaught ReferenceError: WebUploader is not defined at (index):46 (anonymous) @ (index):46

2，文件上传组件：

3，js函数：

 <script type="text/javascript">
		//模态框显示时触发的事件,在点击弹出模态框的时候再初始化WebUploader，解决点击上传无反应问题
			$("#addSource").on('shown.bs.modal',function(e){
    var file_md5   = '';   // 用于MD5校验文件
    var block_info = [];   // 用于跳过已有上传分片
    var uploader;
  
   // alert("Dsf");
    // 创建上传
   uploader = WebU