大文件分片上传

最新推荐文章于 2024-02-23 16:10:18 发布

zhuimengzhe5

最新推荐文章于 2024-02-23 16:10:18 发布

阅读量5.2k

点赞数 2

分类专栏：前端文章标签：分片上传断点续传大文件上传前端文件上传

本文链接：https://blog.csdn.net/zhuimengzhe5/article/details/92430023

版权

本文介绍了如何在前端实现大文件分片上传，以解决大文件上传时的超时问题。使用了百度的WebUploader插件，详细讲解了前端页面的配置，包括js和css的引入，文件选择框、提交按钮和进度条的HTML结构，以及JavaScript代码实现。在服务器端，接收到分片文件后进行保存，并在所有分片上传完成后进行文件合并。对于3GB大小的文件，上传大约需要10分钟，500MB文件则在1.5分钟左右完成。作者还探讨了可能的优化方案，如使用多线程接收分片。

摘要由CSDN通过智能技术生成

前言：

最近在做公司的app项目，其中的一块需求是要上传视频，由于现在的电子设备等像素都比较高，所以拍摄的视频内存都比较大，如果直接上传很容易出现连接超时，在查询相关资料之后，准备在前端实现分片上传，其原理就是将大文件分割成合适大小的小文件，也就是分片，将小片传递到后台之后，保存在项目，等待所有的小片上传完毕之后再小片依次写入一个新的文件，即合并。本次使用的百度的上传插件WebUploader。官网及API：https://fex.baidu.com/webuploader/

下面将详细记录操作过程。

一、前端页面

1、首先引入需要的js和css

<!-- css-->
<link rel="stylesheet" type="text/css" href="../css/webuploader.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />

这里根据自己的地址引入webuploader.css,此处的bootstrap.css是为了美化后面的进度条样式。

<!-- js-->
<script type="text/javascript" src="../js/webuploader.min.js"></script>

2、页面html

<body >
	<h2>Hello,World</h2>
    <div id="thelist" class="uploader-list"></div>
    <div style="margin: 20px 20px 20px 0;">
        <div id="picker" class="form-control-focus">选择文件</div>
    </div>
    <button id="btnSync" type="button" class="btn btn-warning">开始同步</button>　


<!-- 进度条-->
	<div class="progress">
		  <div id="progress" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
			<!-- <span class="sr-only">60% 完成</span> -->
		  </div>
	</div>

</body>

页面定义了一个文件选择框和提交按钮，还有一个进度条

3、js代码

 var uploader = WebUploader.create({
            // swf文件路径
            swf : '../js/Uploader.swf',//这个好像普通的文件上

最低0.47元/天解锁文章

zhuimengzhe5

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录