html大文件分段传输

最近遇见一个需要上传超大大文件的需求，调研了七牛和腾讯云的切片分段上传功能，因此在此整理前端大文件上传相关功能的实现。

在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大，或者网络条件不好时，上传的时间会比较长（要传输更多的报文，丢包重传的概率也更大），用户不能刷新页面，只能耐心等待请求完成。

下面从文件上传方式入手，整理大文件上传的思路，并给出了相关实例代码，由于PHP内置了比较方便的文件拆分和拼接方法，因此服务端代码使用PHP进行示例编写。

本文相关示例代码位于github上，主要参考

聊聊大文件上传

大文件切割上传

文件上传的几种方式

首先我们来看看文件上传的几种方式。

普通表单上传

使用PHP来展示常规的表单上传是一个不错的选择。首先构建文件上传的表单，并指定表单的提交内容类型为enctype="multipart/form-data"，表明表单需要上传二进制数据。

然后编写index.php上传文件接收代码，使用move_uploaded_file方法即可(php大法好…)

form表单上传大文件时，很容易遇见服务器超时的问题。通过xhr，前端也可以进行异步上传文件的操作，一般由两个思路。

文件编码上传

第一个思路是将文件进行编码，然后在服务端进行解码，之前写过一篇在前端实现图片压缩上传的博客，其主要实现原理就是将图片转换成base64进行传递

varimgURL = URL.createObjectURL(file);

ctx.drawImage(imgURL, 0, 0);

// 获取图片的编码，然后将图片当做是一个很长的字符串进行传递

vardata= canvas.toDataURL( "image/jpeg", 0.5);

在服务端需要做的事情也比较简单，首先解码base64，然后保存图片即可

$imgData = $_REQUEST[ 'imgData'];

$base64 = explode( ',', $imgData)[ 1];

$img = base64_decode($base64);

$url = './test.jpg';

if(file_put_c