vue文件上传组件

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

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

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

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

asp.net源码下载，jsp-springboot源码下载，jsp-eclipse源码下载，jsp-myeclipse源码下载，php源码下载，csharp-winform源码下载，vue-cli源码下载，c++源码下载

文件上传的几种方式

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

普通表单上传

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

1. 1. <form action="/index.php" method="POST" enctype="multipart/form-data">

   3. <input type="file" name="myfile">

   5. <input type="submit">

   7. </form>

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

1. 1. $imgName = 'IMG'.time().'.'.str_replace('image/','',$_FILES["myfile"]['type']);

   3. $fileName = 'upload/'.$imgName;

   5. // 移动上传文件至指定upload文件夹下，并根据返回值判断操作是否成功

   7. if (move_uploaded_file($_FILES['myfile']['tmp_name'], $fileName)){

   9. echo $fileName;

   11. }else {

   13. echo "nonn";

   15. }

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

文件编码上传

第一个思路是将文件进行编码，然后在服务端进行解码，其主要实现原理就是将图片转换成base64进行传递

var imgURL = URL.createObjectURL(file);ctx.drawImage(imgURL, 0, 0);// 获取图片的编码，然后将图片当做是一个很长的字符串进行传递var data = canvas.toDataURL("image/jpeg", 0.5);

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

1. 1. $imgData = $_REQUEST['imgData'];

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

   5. $img = base64_decode($base64);

   7. $url = './test.jpg';

   9. if (file_put_contents($url, $img)) {

   11. exit(json_encode(array(

   13. url => $url

   15. )));

   17. }

base64编码的缺点在于其体积比原图片更大（因为Base64将三个字节转化成四个字节，因此编码后的文本，会比原文本大出三分之一左右），对于体积很大的文件来说，上传和解析的时间会明显增加。

更多关于base64的知识，可以参考Base64笔记。

除了进行base64编码，还可以在前端直接读取文件内容后以二进制格式上传

1. 1. // 读取二进制文件

   3. function readBinary(text){

   5. var data = new ArrayBuffer(text.length);

   7. var ui8a = new Uint8Array(data, 0);

   9. for (var i = 0; i < text.length; i++){

   11. ui8a[i] = (text.charCodeAt(i) & 0xff);

   13. }

   15. console.log(ui8a)

   17. }

   20. var reader = new FileReader();

   22. reader.onload = function(){

   24. readBinary(this.result) // 读取result或直接上传

   26. }

   28. // 把从input里读取的文件内容，放到fileReader的result字段里

   30. reader.readAsBinaryString(file);

formData异步上传

FormData对象主要用来组装一组用 XMLHttpRequest发送请求的键/值对，可以更加灵活地发送Ajax请求。可以使用FormData来模拟表单提交。

1. 1. let files = e.target.files // 获取input的file对象

   3. let formData = new FormData();

   5. formData.append('file', file);

   7. axios.post(url, formData);

服务端处理方式与直接form表单请求基本相同。

iframe无刷新页面

在低版本的浏览器（如IE）上，xhr是不支持直接上传formdata的，因此只能用form来上传文件，而form提交本身会进行页面跳转，这是因为form表单的target属性导致的，其取值有

• _self，默认值，在相同的窗口中打开响应页面

• _blank，在新窗口打开

• _parent，在父窗口打开

• _top，在最顶层的窗口打开

• framename，在指定名字的iframe中打开

如果需要让用户体验异步上传文件的感觉，可以通过framename指定iframe来实现。把form的target属性设置为一个看不见的iframe，那么返回的数据就会被这个iframe接受，因此只有该iframe会被刷新，至于返回结果，也可以通过解析这个iframe内的文本来获取。

1. function upload(){

3. var now = +new Date()

5. var id = 'frame' + now

7. $("body").append(`<iframe style="display:none;" name="${id}" id="${id}" />`);

10. var $form = $("#myForm")

12. $form.attr({

14. "action": '/index.php',

16. "method": "post",

18. "enctype": "multipart/form-data",

20. "encoding": "multipart/form-data",

22. "target": id

24. }).submit()

27. $("#"+id).on("load", function(){

29. var content = $(this).contents().find("body").text()

31. try{

33. var data = JSON.parse(content)

35. }catch(e){

37. console.log(e)

39. }

41. })

43. }

大文件上传

现在来看看在上面提到的几种上传方式中实现大文件上传会遇见的超时问题，

• 表单上传和iframe无刷新页面上传，实际上都是通过form标签进行上传文件，这种方式将整个请求完全交给浏览器处理，当上传大文件时，可能会遇见请求超时的情形

• 通过fromData，其实际也是在xhr中封装一组请求参数，用来模拟表单请求，无法避免大文件上传超时的问题

• 编码上传，我们可以比较灵活地控制上传的内容

大文件上传最主要的问题就在于：在同一个请求中，要上传大量的数据，导致整个过程会比较漫长，且失败后需要重头开始上传。试想，如果我们将这个请求拆分成多个请求，每个请求的时间就会缩短，且如果某个请求失败，只需要重新发送这一次请求即可，无需从头开始，这样是否可以解决大文件上传的问题呢？

综合上面的问题，看来大文件上传需要实现下面几个需求

• 支持拆分上传请求(即切片)

• 支持断点续传

• 支持显示上传进度和暂停上传

接下来让我们依次实现这些功能，看起来最主要的功能应该就是切片了。

文件切片

参考： 详细配置信息及思路

编码方式上传中，在前端我们只要先获取文件的二进制内容，然后对其内容进行拆分，最后将每个切片上传到服务端即可。

在JavaScript中，文件FIle对象是Blob对象的子类，Blob对象包含一个重要的方法slice，通过这个方法，我们就可以对二进制文件进行拆分。

下面是一个拆分文件的示例

1. function slice(file, piece = 1024 * 1024 * 5) {

2. let totalSize = file.size; // 文件总大小

3. let start = 0; // 每次上传的开始字节

4. let end = start + piece; // 每次上传的结尾字节

5. let chunks = []

6. while (start < totalSize) {

7. // 根据长度截取每次需要上传的数据

8. // File对象继承自Blob对象，因此包含slice方法

9. let blob = file.slice(start, end);

10. chunks.push(blob)

12. start = end;

13. end = start + piece;

14. }

15. return chunks

16. }

将文件拆分成piece大小的分块，然后每次请求只需要上传这一个部分的分块即可

1. let file = document.querySelector("[name=file]").files[0];

3. const LENGTH = 1024 * 1024 * 0.1;

4. let chunks = slice(file, LENGTH); // 首先拆分切片

6. chunks.forEach(chunk=>{

7. let fd = new FormData();

8. fd.append("file", chunk);

9. post('/mkblk.php', fd)

10. })

服务器接收到这些切片后，再将他们拼接起来就可以了，下面是PHP拼接切片的示例代码

1. $filename = './upload/' . $_POST['filename'];//确定上传的文件名

2. //第一次上传时没有文件，就创建文件，此后上传只需要把数据追加到此文件中

3. if(!file_exists($filename)){

4. move_uploaded_file($_FILES['file']['tmp_name'],$filename);

5. }else{

6. file_put_contents($filename,file_get_contents($_FILES['file']['tmp_name']),FILE_APPEND);

7. echo $filename;

8. }

测试时记得修改nginx的server配置，否则大文件可能会提示413 Request Entity Too Large的错误。

1. server {

2. // ...

3. client_max_body_size 50m;

4. }

上面这种方式来存在一些问题

• 无法识别一个切片是属于哪一个切片的，当同时发生多个请求时，追加的文件内容会出错

• 切片上传接口是异步的，无法保证服务器接收到的切片是按照请求顺序拼接的

因此接下来我们来看看应该如何在服务端还原切片。

还原切片

在后端需要将多个相同文件的切片还原成一个文件，上面这种处理切片的做法存在下面几个问题

• 如何识别多个切片是来自于同一个文件的，这个可以在每个切片请求上传递一个相同文件的context参数

• 如何将多个切片还原成一个文件

  • 确认所有切片都已上传，这个可以通过客户端在切片全部上传后调用mkfile接口来通知服务端进行拼接

  • 找到同一个context下的所有切片，确认每个切片的顺序，这个可以在每个切片上标记一个位置索引值

  • 按顺序拼接切片，还原成文件

上面有一个重要的参数，即context，我们需要获取为一个文件的唯一标识，可以通过下面两种方式获取

• 根据文件名、文件长度等基本信息进行拼接，为了避免多个用户上传相同的文件，可以再额外拼接用户信息如uid等保证唯一性

• 根据文件的二进制内容计算文件的hash，这样只要文件内容不一样，则标识也会不一样，缺点在于计算量比较大.

修改上传代码，增加相关参数

1. // 获取context，同一个文件会返回相同的值

2. function createContext(file) {

3. return file.name + file.length

4. }

6. let file = document.querySelector("[name=file]").files[0];

7. const LENGTH = 1024 * 1024 * 0.1;

8. let chunks = slice(file, LENGTH);

10. // 获取对于同一个文件，获取其的context

11. let context = createContext(file);

13. let tasks = [];

14. chunks.forEach((chunk, index) => {

15. let fd = new FormData();

16. fd.append("file", chunk);

17. // 传递context

18. fd.append("context", context);

19. // 传递切片索引值

20. fd.append("chunk", index + 1);

22. tasks.push(post("/mkblk.php", fd));

23. });

24. // 所有切片上传完毕后，调用mkfile接口

25. Promise.all(tasks).then(res => {

26. let fd = new FormData();

27. fd.append("context", context);

28. fd.append("chunks", chunks.length);

29. post("/mkfile.php", fd).then(res => {

30. console.log(res);

31. });

32. });

在mkblk.php接口中，我们通过context来保存同一个文件相关的切片

1. // mkblk.php

2. $context = $_POST['context'];

3. $path = './upload/' . $context;

4. if(!is_dir($path)){

5. mkdir($path);

6. }

7. // 把同一个文件的切片放在相同的目录下

8. $filename = $path .'/'. $_POST['chunk'];

9. $res = move_uploaded_file($_FILES['file']['tmp_name'],$filename);

10. 复制代码

除了上面这种简单通过目录区分切片的方法之外，还可以将切片信息保存在数据库来进行索引。接下来是mkfile.php接口的实现，这个接口会在所有切片上传后调用

1. // mkfile.php

2. $context = $_POST['context'];

3. $chunks = (int)$_POST['chunks'];

5. //合并后的文件名

6. $filename = './upload/' . $context . '/file.jpg';

7. for($i = 1; $i <= $chunks; ++$i){

8. $file = './upload/'.$context. '/' .$i; // 读取单个切块

9. $content = file_get_contents($file);

10. if(!file_exists($filename)){

11. $fd = fopen($filename, "w+");

12. }else{

13. $fd = fopen($filename, "a");

14. }

15. fwrite($fd, $content); // 将切块合并到一个文件上

16. }

17. echo $filename;

18. 复制代码

这样就解决了上面的两个问题：

• 识别切片来源

• 保证切片拼接顺序

断点续传

即使将大文件拆分成切片上传，我们仍需等待所有切片上传完毕，在等待过程中，可能发生一系列导致部分切片上传失败的情形，如网络故障、页面关闭等。由于切片未全部上传，因此无法通知服务端合成文件。这种情况下可以通过断点续传来进行处理。

断点续传指的是：可以从已经上传部分开始继续上传未完成的部分，而没有必要从头开始上传，节省上传时间。

由于整个上传过程是按切片维度进行的，且mkfile接口是在所有切片上传完成后由客户端主动调用的，因此断点续传的实现也十分简单：

• 在切片上传成功后，保存已上传的切片信息

• 当下次传输相同文件时，遍历切片列表，只选择未上传的切片进行上传

• 所有切片上传完毕后，再调用mkfile接口通知服务端进行文件合并

因此问题就落在了如何保存已上传切片的信息了，保存一般有两种策略

• 可以通过locaStorage等方式保存在前端浏览器中，这种方式不依赖于服务端，实现起来也比较方便，缺点在于如果用户清除了本地文件，会导致上传记录丢失

• 服务端本身知道哪些切片已经上传，因此可以由服务端额外提供一个根据文件context查询已上传切片的接口，在上传文件前调用该文件的历史上传记录

下面让我们通过在本地保存已上传切片记录，来实现断点上传的功能

1. // 获取已上传切片记录

2. function getUploadSliceRecord(context){

3. let record = localStorage.getItem(context)

4. if(!record){

5. return []

6. }else {

7. try{

8. return JSON.parse(record)

9. }catch(e){}

10. }

11. }

12. // 保存已上传切片

13. function saveUploadSliceRecord(context, sliceIndex){

14. let list = getUploadSliceRecord(context)

15. list.push(sliceIndex)

16. localStorage.setItem(context, JSON.stringify(list))

17. }

18. 复制代码

然后对上传逻辑稍作修改，主要是增加上传前检测是已经上传、上传后保存记录的逻辑

1. let context = createContext(file);

2. // 获取上传记录

3. let record = getUploadSliceRecord(context);

4. let tasks = [];

5. chunks.forEach((chunk, index) => {

6. // 已上传的切片则不再重新上传

7. if(record.includes(index)){

8. return

9. }

11. let fd = new FormData();

12. fd.append("file", chunk);

13. fd.append("context", context);

14. fd.append("chunk", index + 1);

16. let task = post("/mkblk.php", fd).then(res=>{

17. // 上传成功后保存已上传切片记录

18. saveUploadSliceRecord(context, index)

19. record.push(index)

20. })

21. tasks.push(task);

22. });

23. 复制代码

此时上传时刷新页面或者关闭浏览器，再次上传相同文件时，之前已经上传成功的切片就不会再重新上传了。

服务端实现断点续传的逻辑基本相似，只要在getUploadSliceRecord内部调用服务端的查询接口获取已上传切片的记录即可，因此这里不再展开。

此外断点续传还需要考虑切片过期的情况：如果调用了mkfile接口，则磁盘上的切片内容就可以清除掉了，如果客户端一直不调用mkfile的接口，放任这些切片一直保存在磁盘显然是不可靠的，一般情况下，切片上传都有一段时间的有效期，超过该有效期，就会被清除掉。基于上述原因，断点续传也必须同步切片过期的实现逻辑。

上传进度和暂停

通过xhr.upload中的progress方法可以实现监控每一个切片上传进度。

上传暂停的实现也比较简单，通过xhr.abort可以取消当前未完成上传切片的上传，实现上传暂停的效果，恢复上传就跟断点续传类似，先获取已上传的切片列表，然后重新发送未上传的切片。

由于篇幅关系，上传进度和暂停的功能这里就先不实现了。

小结

目前社区已经存在一些成熟的大文件上传解决方案，如七牛SDK，腾讯云SDK等，也许并不需要我们手动去实现一个简陋的大文件上传库，但是了解其原理还是十分有必要的。

本文首先整理了前端文件上传的几种方式，然后讨论了大文件上传的几种场景，以及大文件上传需要实现的几个功能

• 通过Blob对象的slice方法将文件拆分成切片

• 整理了服务端还原文件所需条件和参数，演示了PHP将切片还原成文件

• 通过保存已上传切片的记录来实现断点续传

还留下了一些问题，如：合并文件时避免内存溢出、切片失效策略、上传进度暂停等功能，并没有去深入或一一实现，继续学习吧~