Vue 进阶系列丨大文件切片上传

Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

2013年7月28日，尤雨溪第一次在 GItHub 上为 Vue.js 提交代码；2015年10月26日，Vue.js 1.0.0版本发布；2016年10月1日，Vue.js 2.0发布。

最早的 Vue.js 只做视图层，没有路由， 没有状态管理，也没有官方的构建工具，只有一个库，放到网页里就可以直接用了。

后来，Vue.js 慢慢开始加入了一些官方的辅助工具，比如路由（Router）、状态管理方案（Vuex）和构建工具（Vue-cli）等。此时，Vue.js 的定位是：The Progressive Framework。翻译成中文，就是渐进式框架。

Vue.js2.0 引入了很多特性，比如虚拟 DOM，支持 JSX 和 TypeScript，支持流式服务端渲染，提供了跨平台的能力等。Vue.js 在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。

Vue 已是一名前端工程师必备的技能，现在就让我们开始深入学习 Vue.js 内部的核心技术原理吧！

文件上传

在前端中，对于文件上传是一个很常见的功能，我们可以上传图片、文件等到服务器，对于一般的小型的文件， 例如小图片，我们可以选择基于 formdata 进行文件上传，也可以基于 base64 格式去上传，直接发送表单请求即可。

但是对于大文件来说，比如几个G甚至几十G的文件来说，我们如果还是按小文件来处理的话，就显得不是很恰当了。本篇文章就是告诉大家如何实现大文件上传的，包括切片上传、断点续传、进度把控等方面，废话不多说，开始吧。

大文件上传思路

这里先简单说一下整体的思路：

1. 针对文件内容生成的唯一的hash值，作为文件名称。确保相同文件，不同的文件名的情况下，生成的hash值是一样的。
2. 将大文件切成若干个小的分片，并且每一个分片的命名格式为 “文件hash值+当前切片索引值”，方便后端合并这些切片。
3. 上传之前，将当前文件的hash值传递给后台，拿到当前文件在数据库里已经存在的切片，如果有切片已经存在，那么前端就不传递这些了，这就是断点续传的原理。
4. 上传过程中，通过监听当前传递的切片数除以切片总数，获取当前上传进度。当进度条百分百时，自动通知后端将这些文件合并。
5. 上传完成。---

下面进行代码展示：

• 生成文件名

这里我们使用一个第三方库:spark-md5，根据文件二进制流，生成hash值。

在vue中，通过：npm i spark-md5 安装

import SparkMD5 from 'spark-md5'

/**
 * @description: 拿到文件的hash值
 * @Author: hfunteam
 * @param {*} file 文件，File类型
 * @return {
 *   buffer: 文件的二进制流
 *   hash: 生成的文件hash值
 *   suffix：文件后缀名
 *   filename: 文件名称 hash + suffix
 * } 
 */ 
function changeBuffer(file: File) {
  return new Promise(resolve => {
    let fileReader = new FileReader();
    fileReader.readAsArrayBuffer(file);
    fileReader.onload = ev => {
      let buffer: ArrayBuffer = ev.target!.result as ArrayBuffer,
        spark = new SparkMD5.ArrayBuffer(),
        HASH,
        suffix;
      spark.append(buffer);
      // 拿到文件的hash值
      hash = spark.end();
      // 匹配文件后缀名
      suffix = /\.([a-zA-Z0-9]+)$/.exec(file.name)![1];
      resolve({
        buffer,
        hash,
        suffix,
        filename: `${HASH}.${suffix}`
      });
    };
  });
};

• 分片上传+断点续传

// html 部分
<input type="file" id="input" >

// js 部分
import axios from 'axios'
// 监听input按钮事件
document.getElementById('input').addEventListener('change', async function () {
    // 获取文件的HASH
    let alreadyUploadChunks = [], // 当前已经上传的切片
        {
            hash,
            suffix
        } = changeBuffer(file); 
    
    // 获取已经上传的切片信息
     let data = await axios.get('/upload_already', {
          params: {
              hash
          }
      });
     // 从后端拿到已经上传的切片列表
     alreadyUploadChunks = data.fileList
    
    // 实现文件切片处理 「固定数量 或者 固定大小」
    let max = 1024 * 100, // 切片大小
        count = Math.ceil(file.size / max), // 切片总数
        index = 0,   // 当前上传的切片索引值
        chunks = []; // 存放切片的数组
    if (count > 100) {
        max = file.size / 100;
        count = 100;
    }
    // 存放切片，注意此处的切片名称，hash+index+suffix
    while (index < count) {
        chunks.push({
            file: file.slice(index * max, (index + 1) * max),
            filename: `${HASH}_${index+1}.${suffix}`
        });
        index++;
    }
    // 把每一个切片都上传到服务器上
    chunks.forEach(chunk => {
        // 这里进行断点续传：已经上传的无需在上传
        if (alreadyUploadChunks.length > 0 && alreadyUploadChunks.includes(chunk.filename)) {
            // 管控进度条
            manageProgress();
            return;
        }
        let formdata = new FormData();
        formdata.append('file', chunk.file);
        formdata.append('filename', chunk.filename);
        instance.post('/upload_chunk', formdata).then(data => {
            // 管控进度条
            manageProgress();
        }).catch(() => {            
            alert('当前切片上传失败，请您稍后再试');
        });
    });
})

• 进度条控制+通知合并

当进度条到达百分之百时，调用通知后台合并切片接口，合并成功，则上传成功。

async function manageProgress(){
    // 管控进度
    document.getElementById('progress').style.width = `${index/count*100}%`;
    // 当所有切片都上传成功，我们合并切片
    if (index < count) return;
    document.getElementById('progress').style.width = `100%`;
    try {
        data = await instance.post('/upload_merge', {
            hash,
            count
        }, {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        });
        if (data.code === 0) {
            alert(`恭喜您，文件上传成功`);
            return;
        }
        throw data.codeText;
    } catch (err) {
        alert('切片合并失败，请您稍后再试');
    }
};

Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

叶阳辉

HFun 前端攻城狮

往期精彩：

• Vue 进阶系列丨Object 的变化侦测
• Vue 进阶系列丨Array 的变化侦测
• Vue 进阶系列丨虚拟DOM和VNode
• Vue 进阶系列丨Patch 和模板编译
• Vue 进阶系列丨事件相关的实例方法
• Vue 进阶系列丨生命周期相关的实例方法
• Vue 进阶系列丨生命周期
• Vue 进阶系列丨自定义指令
• Vue 进阶系列丨最佳实践
• Vue 进阶系列丨Mixin 混入
• Vue 进阶系列丨权限控制 addRoute()
• Vue 进阶系列丨npm发布vue组件
• Vue 进阶系列丨Vuex+TS 代码提示
• Vue 进阶系列丨自定义指令实现按钮权限功能
• Vue 进阶系列丨Pinia 的基本使用
• Vue 进阶系列丨vue2和vue3定义插件的区别
• Vue 进阶系列丨vuex持久化
• Vue 进阶系列丨webWorker 多线程