1. 前言

之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在 vue 这种 spa 框架面前并不是什么难题。然而后端大佬说我们要实现分片上传、秒传以及断点续传的功能，听起来头都大了。

很久之前我写了一篇 webuploader 的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于vue-simple-uploader插件实现该功能，在项目中使用起来无痛且稳定。

如果你只是想实现基本的（非定制化的）上传功能，直接使用vue-simple-uploader，多读一下它的文档，不需要更多的二次封装。
如果你只是想实现全局上传插件，也可以参照一下我的实现。
如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。

本文源码在此：https://github.com/shady-xia/vue-uploader-solutions

2. 关于 vue-simple-uploader

vue-simple-uploader是基于 simple-uploader.js 封装的 vue 上传插件。它的优点包括且不限于以下几种：

• 支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传
• 可暂停、继续上传
• 错误处理
• 支持“秒传”，通过文件判断服务端是否已存在从而实现“秒传”
• 分块上传
• 支持进度、预估剩余时间、出错自动重试、重传等操作

读这篇文章之前，建议先读一遍simple-uploader.js的文档，然后再读一下vue-simple-uploader的文档，了解一下各个参数的作用是什么，我在这里假定大家已经比较熟悉了。。
vue-simple-uploader 文档

simple-uploader.js 文档

安装：npm install vue-simple-uploader --save
使用：在 main.js 中：

import uploader from 'vue-simple-uploader'
Vue.use(uploader)

3. 基于 vue-simple-uploader 封装全局上传组件

引入vue-simple-uploader后，我们开始封装全局的上传组件globalUploader.vue，代码比较长，就不整个放出来了，源码放到 github 上了，这里一步一步地讲解。

template 部分如下，本人自定义了模板和样式，所以 html 部分比较长，css 部分暂时不列出，大家可以根据自己的 ui 去更改，主要关注一下uploader这个组件的options参数及文件added、success、progress、error几个事件：

<template>
    <div id="global-uploader">
    <span class="hljs-comment">&lt;!-- 上传 --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">uploader</span>
            <span class="hljs-attr">ref</span>=<span class="hljs-string">"uploader"</span>
            <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>
            <span class="hljs-attr">:autoStart</span>=<span class="hljs-string">"false"</span>
            @<span class="hljs-attr">file-added</span>=<span class="hljs-string">"onFileAdded"</span>
            @<span class="hljs-attr">file-success</span>=<span class="hljs-string">"onFileSuccess"</span>
            @<span class="hljs-attr">file-progress</span>=<span class="hljs-string">"onFileProgress"</span>
            @<span class="hljs-attr">file-error</span>=<span class="hljs-string">"onFileError"</span>
            <span class="hljs-attr">class</span>=<span class="hljs-string">"uploader-app"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">uploader-unsupport</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">uploader-unsupport</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-name">uploader-btn</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"global-uploader-btn"</span> <span class="hljs-attr">:attrs</span>=<span class="hljs-string">"attrs"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"uploadBtn"</span>&gt;</span>选择文件<span class="hljs-tag">&lt;/<span class="hljs-name">uploader-btn</span>&gt;</span>

        <span class="hljs-tag">&lt;<span class="hljs-name">uploader-list</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"panelShow"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"file-panel"</span> <span class="hljs-attr">slot-scope</span>=<span class="hljs-string">"props"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"{'collapse': collapse}"</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"file-title"</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>文件列表<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"operate"</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"fileListShow"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">"collapse ? '展开':'折叠' "</span>&gt;</span>
                            <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"iconfont"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"collapse ? 'icon-fullscreen': 'icon-minus-round'"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"close"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"关闭"</span>&gt;</span>
                            <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"iconfont icon-close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

                <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"file-list"</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"file-item"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"`file-${file.id}`"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"file in props.fileList"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"file.id"</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">uploader-file</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"'file_' + file.id"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"files"</span> <span class="hljs-attr">:file</span>=<span class="hljs-string">"file"</span> <span class="hljs-attr">:list</span>=<span class="hljs-string">"true"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">uploader-file</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-file"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"!props.fileList.length"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nucfont inuc-empty-file"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> 暂无待上传文件<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">uploader-list</span>&gt;</span>

    <span class="hljs-tag">&lt;/<span class="hljs-name">uploader</span>&gt;</span>

<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

</template>

组件中的 data 部分：

data() {
    return {
        options: {
            target: 'http://xxxxx/xx', // 目标上传 URL
            chunkSize: '2048000',   // 分块大小
            fileParameterName: 'file', // 上传文件时文件的参数名，默认 file
            maxChunkRetries: 3,  // 最大自动失败重试上传次数
            testChunks: true,     // 是否开启服务器分片校验
            // 服务器分片校验函数，秒传及断点续传基础
            checkChunkUploadedByResponse: function (chunk, message) {
                let objMessage = JSON.parse(message);
                if (objMessage.skipUpload) {
                    return true;
                }
            <span class="hljs-keyword">return</span> (objMessage.<span class="hljs-property">uploaded</span> || []).<span class="hljs-title function_">indexOf</span>(chunk.<span class="hljs-property">offset</span> + <span class="hljs-number">1</span>) &gt;= <span class="hljs-number">0</span>
        },
        <span class="hljs-comment">// 额外的自定义查询参数</span>
        <span class="hljs-attr">query</span>: <span class="hljs-function">(<span class="hljs-params">file, chunk</span>) =&gt;</span> {
           <span class="hljs-keyword">return</span> {
              ...file.<span class="hljs-property">params</span>, 
            }
        },

    },
    <span class="hljs-attr">attrs</span>: {
     <span class="hljs-comment">// 接受的文件类型，形如['.png', '.jpg', '.jpeg', '.gif', '.bmp'...] 这里我封装了一下</span>
        <span class="hljs-attr">accept</span>: <span class="hljs-variable constant_">ACCEPT_CONFIG</span>.<span class="hljs-title function_">getAll</span>()
    },
    <span class="hljs-attr">panelShow</span>: <span class="hljs-literal">false</span>,   <span class="hljs-comment">//选择文件后，展示上传panel</span>
}

},

全局引用：
在app.vue中引用，即作为全局的组件一直存在，只不过在不使用的时候把上传界面隐藏了

<global-uploader></global-uploader>

4. 文件上传流程概览

1. 点击按钮，触发文件上传操作：

（如果你做的不是全局上传的功能，而是直接点击上传，忽略这一步。）

因为我做的是全局上传的插件，要先把上传的窗口隐藏起来，在点击某个上传按钮的时候，用 Bus 发送一个openUploader的事件，在globalUploader.vue中接收该事件，trigger 我们uploader-btn的 click 事件。

在某个页面中，点击上传按钮，同时把要给后台的参数带过来（如果有的话），这里组件之间传值我用的event bus，当然用vuex会更好：

Bus.$emit('openUploader', {
   superiorID: this.superiorID
})

在globalUploader.vue中接收该事件：

Bus.$on('openUploader', query => {
    this.params = query || {};
<span class="hljs-comment">// 这样就打开了选择文件的操作窗口</span>
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.$refs.uploadBtn) {&nbsp;
    <span class="hljs-keyword">this</span>.$refs.uploadBtn.$el.click()
}

});

2. 选择文件后，将上传的窗口展示出来，开始 md5 的计算工作

onFileAdded(file) {
    this.panelShow = true
    Bus.$emit('fileAdded')
<span class="hljs-comment">// 将额外的参数赋值到每个文件上，以不同文件使用不同params的需求</span>
file.<span class="hljs-property">params</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">params</span>

<span class="hljs-comment">// 计算MD5，完成后开始上传操作</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">computeMD5</span>(file).<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">startUpload</span>(result))

},

这里有个前提，我在uploader中将autoStart设为了false，为什么要这么做？

在选择文件之后，我要计算 MD5，以此来实现断点续传及秒传的功能，所以选择文件后直接开始上传肯定不行，要等 MD5 计算完毕之后，再开始文件上传的操作。

具体的 MD5 计算方法，会在下面讲，这里先简单引出。

上传过程中，会不断触发 file-progress 上传进度的回调

// 文件进度的回调
onFileProgress(rootFile, file, chunk) {
    console.log(` 上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
},

3. 文件上传成功后
文件上传成功后，在“上传完成”的回调中，通过服务端返回的needMerge字段，来判断是否需要再发送合并分片的请求，
如果这个字段为 true，则需要给后台发一个请求合并的 ajax 请求，否则直接上传成功。

注意：这里的needMerge是我和后台商议决定的字段名

onFileSuccess(rootFile, file, response, chunk) {
    let res = JSON.parse(response);
<span class="hljs-comment">// 服务器自定义的错误，这种错误是Uploader无法拦截的</span>
<span class="hljs-keyword">if</span> (!res.<span class="hljs-property">result</span>) {
    <span class="hljs-variable language_">this</span>.$message({ <span class="hljs-attr">message</span>: res.<span class="hljs-property">message</span>, <span class="hljs-attr">type</span>: <span class="hljs-string">'error'</span> });
    <span class="hljs-keyword">return</span>
}

<span class="hljs-comment">// 如果服务端返回需要合并</span>
<span class="hljs-keyword">if</span> (res.<span class="hljs-property">needMerge</span>) {
    api.<span class="hljs-title function_">mergeSimpleUpload</span>({
        <span class="hljs-attr">tempName</span>: res.<span class="hljs-property">tempName</span>,
        <span class="hljs-attr">fileName</span>: file.<span class="hljs-property">name</span>,
        ...file.<span class="hljs-property">params</span>,
    }).<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
        <span class="hljs-comment">// 文件合并成功</span>
        <span class="hljs-title class_">Bus</span>.$emit(<span class="hljs-string">'fileSuccess'</span>, data);
    }).<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> {});
<span class="hljs-comment">// 不需要合并    </span>
} <span class="hljs-keyword">else</span> {
    <span class="hljs-title class_">Bus</span>.$emit(<span class="hljs-string">'fileSuccess'</span>, res);
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'上传成功'</span>);
}

},
onFileError(rootFile, file, response, chunk) {
console.log(error)
},

5. 文件分片

vue-simple-uploader自动将文件进行分片，在options的chunkSize中可以设置每个分片的大小。

如图：对于大文件来说，会发送多个请求，在设置testChunks为true后（在插件中默认就是true），会发送与服务器进行分片校验的请求，下面的第一个 get 请求就是该请求；后面的每一个 post 请求都是上传分片的请求

看一下发送给服务端的参数，其中chunkNumber表示当前是第几个分片，totalChunks代表所有的分片数，这两个参数都是都是插件根据你设置的chunkSize来计算的。

需要注意的就是在最后文件上传成功的事件中，通过后台返回的字段，来判断是否要再给后台发送一个文件合并的请求。

6. MD5 的计算过程

断点续传及秒传的基础是要计算文件的MD5，这是文件的唯一标识，然后服务器根据MD5进行判断，是进行秒传还是断点续传。

在file-added事件之后，就计算MD5，我们最终的目的是将计算出来的MD5加到参数里传给后台，然后继续文件上传的操作，详细的思路步骤是：

0. 把 uploader 组件的autoStart设为false，即选择文件后不会自动开始上传
1. 先通过 file.pause()暂停文件，然后通过 H5 的FileReader接口读取文件
2. 将异步读取文件的结果进行MD5，这里我用的加密工具是spark-md5，你可以通过npm install spark-md5 --save来安装，也可以使用其他 MD5 加密工具。
3. file 有个属性是uniqueIdentifier，代表文件唯一标示，我们把计算出来的 MD5 赋值给这个属性 file.uniqueIdentifier = md5，这就实现了我们最终的目的。
4. 通过file.resume()开始 / 继续文件上传。

/**
 * 计算 md5 值，以实现断点续传及秒传
 * @param file
 * @returns Promise
 */
computeMD5(file) {
  let fileReader = new FileReader()
  let time = new Date().getTime()
  let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
  let currentChunk = 0
  const chunkSize = 10 * 1024 * 1000
  let chunks = Math.ceil(file.size / chunkSize)
  let spark = new SparkMD5.ArrayBuffer()
// 文件状态设为 "计算 MD5"
this.statusSet(file.id, 'md5')
file.pause()
// 计算 MD5 时隐藏”开始“按钮
this.$nextTick(() => {
document.querySelector(.file-<span class="hljs-subst">${file.id}</span> .uploader-file-resume).style.display = 'none'
})
loadNext()
return new Promise((resolve, reject) => {
fileReader.onload = (e) => {
spark.append(e.target.result)
  <span class="hljs-keyword">if</span> (currentChunk &lt; chunks) {
    currentChunk++
    <span class="hljs-title function_">loadNext</span>()

    <span class="hljs-comment">// 实时展示MD5的计算进度</span>
    <span class="hljs-variable language_">this</span>.$nextTick(<span class="hljs-function">() =&gt;</span> {
      <span class="hljs-keyword">const</span> md5ProgressText =<span class="hljs-string">'校验MD5 '</span>+ ((currentChunk/chunks)*<span class="hljs-number">100</span>).<span class="hljs-title function_">toFixed</span>(<span class="hljs-number">0</span>)+<span class="hljs-string">'%'</span>
      <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">`.custom-status-<span class="hljs-subst">${file.id}</span>`</span>).<span class="hljs-property">innerText</span> = md5ProgressText
    })

  } <span class="hljs-keyword">else</span> {
    <span class="hljs-keyword">let</span> md5 = spark.<span class="hljs-title function_">end</span>()

    <span class="hljs-comment">// md5计算完毕</span>
    <span class="hljs-title function_">resolve</span>({md5, file})

    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(
      <span class="hljs-string">`MD5计算完毕：<span class="hljs-subst">${file.name}</span> \nMD5：<span class="hljs-subst">${md5}</span> \n分片：<span class="hljs-subst">${chunks}</span> 大小:<span class="hljs-subst">${file.size}</span> 用时：<span class="hljs-subst">${
        <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime() - time
      }</span> ms`</span>
    )
  }
}

fileReader.<span class="hljs-property">onerror</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
  <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">`文件<span class="hljs-subst">${file.name}</span>读取出错，请检查该文件`</span>)
  file.<span class="hljs-title function_">cancel</span>()
  <span class="hljs-title function_">reject</span>()
}

})
function loadNext() {
let start = currentChunk * chunkSize
let end = start + chunkSize >= file.size ? file.size : start + chunkSize
fileReader.<span class="hljs-title function_">readAsArrayBuffer</span>(blobSlice.<span class="hljs-title function_">call</span>(file.<span class="hljs-property">file</span>, start, end))

}
},
// md5 计算完毕，开始上传
startUpload({md5, file}) {
file.uniqueIdentifier = md5
file.resume()
this.statusRemove(file.id)
},

给 file 的 uniqueIdentifier 属性赋值后，请求中的 identifier 即是我们计算出来的 MD5

7. 秒传及断点续传

在计算完MD5后，我们就能谈断点续传及秒传的概念了。

服务器根据前端传过来的MD5去判断是否可以进行秒传或断点续传：

• a. 服务器发现文件已经完全上传成功，则直接返回秒传的标识。
• b. 服务器发现文件上传过分片信息，则返回这些分片信息，告诉前端继续上传，即断点续传。

7.1 对于前端来说

在每次上传过程的最开始，vue-simple-uploader会发送一个 get 请求，来问服务器我哪些分片已经上传过了，

这个请求返回的结果也有几种可能：

• a. 如果是秒传，在请求结果中会有相应的标识，比如我这里是skipUpload为true，且返回了url，代表服务器告诉我们这个文件已经有了，我直接把url给你，你不用再传了，这就是秒传。

图 a1：秒传情况下后台返回值

图 a2：秒传 gif

• b. 如果后台返回了分片信息，这是断点续传。如图，返回的数据中有个uploaded的字段，代表这些分片是已经上传过的了，插件会自动跳过这些分片的上传。

图 b1：断点续传情况下后台返回值

图 b2：断点续传 gif

• c. 可能什么都不会返回，那这就是个全新的文件了，走完整的分片上传逻辑

7.2 前端做分片检验：checkChunkUploadedByResponse

前面讲的是概念，现在说一说前端在拿到这些返回值之后怎么处理。
插件自己是不会判断哪个需要跳过的，在代码中由options中的checkChunkUploadedByResponse控制，它会根据 XHR 响应内容检测每个块是否上传成功了，成功的分片直接跳过上传
你要在这个函数中进行处理，可以跳过的情况下返回 true 即可。

checkChunkUploadedByResponse: function (chunk, message) {
	 let objMessage = JSON.parse(message);
     if (objMessage.skipUpload) {
         return true;
     }
 <span class="hljs-keyword">return</span> (objMessage.<span class="hljs-property">uploaded</span> || []).<span class="hljs-title function_">indexOf</span>(chunk.<span class="hljs-property">offset</span> + <span class="hljs-number">1</span>) &gt;= <span class="hljs-number">0</span>

},

注：skipUpload 和 uploaded 是我和后台商议的字段，你要按照后台实际返回的字段名来。

8. 自己加的一些功能

后期在项目自用的过程中，经历了很多功能的添加和优化，这里简单的记录一下，看看有没有能帮到大家的。

新增了自定义的状态

（之前一直有小伙伴问怎么没有“校验 MD5”，“合并中”这些状态，我就把我的方法写出来了，方式很笨，但是能实现效果）

插件原本只支持了success、error、uploading、paused、waiting这几种状态，不过 0.6.0 版本之后，fileStatusText 可以设置为一个函数，但是提供的参数还是不太能满足我的需要。

由于业务需求，我额外增加了“校验MD5”、“合并中”、“转码中”、“上传失败”这几种自定义的状态

由于不能改源码，我用了比较 hack 的方式：
当自定义状态开始时，要手动调一下statusSet方法，生成一个p标签盖在原本的状态上面；当自定义状态结束时，还要手动调用statusRemove移除该标签。

this.statusSet(file.id, 'merging');
this.statusRemove(file.id);

具体使用可以参考源码。

优化插件调用

通过 bus 调用的方式，可以自定义发送给服务端的额外参数 params，以及自定义上传选项 options

// params: 发送给服务器的额外参数；
// options：上传选项，目前支持 target、testChunks、mergeFn、accept 等
Bus.$emit('openUploader', {params: {}, options: {}})

file 的动态 params 绑定

将动态的paramas放在了onFileAdded事件中，以解决了不同 file 使用不同 params 的需求

 onFileAdded(file) {
    this.panelShow = true;
    this.computeMD5(file);
<span class="hljs-comment">// 将额外的参数赋值到每个文件上，解决了不同文件使用不同params的需求</span>
file.<span class="hljs-property">params</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">params</span>

<span class="hljs-title class_">Bus</span>.$emit(<span class="hljs-string">'fileAdded'</span>);

},

同时要修改 options 的 query：

query: (file, chunk) => {
    return {
        ...file.params,
    }
},

9. 源码整理

源码放到 github 上了：https://github.com/shady-xia/vue-uploader-solutions

预览地址：https://shady-xia.github.io/vue-uploader-solutions

关于源码的一些解析可以看 github 中的 README.

10. vue-simple-uploader 常见问题整理

这篇文章已经太长了， 遂专门开了一篇文章，整理了下 vue-simple-uploader 常见的问题：
vue-simple-uploader 常见问题整理