vue-simple-uploader上傳插件

基於vue-simple-uploader封裝文件分片上傳、秒傳及斷點續傳的全局上傳插件

https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html

1. 前言
   之前公司要在管理系統中做一個全局上傳插件，即切換各個頁面的時候，上傳界面還在並且上傳不會受到影響，這在vue這種spa框架面前並不是什么難題。然而后端大佬說我們要實現分片上傳、秒傳以及斷點續傳的功能，聽起來頭都大了。

很久之前我寫了一篇webuploader的文章，結果使用起來發現問題很多，且官方團隊不再維護這個插件了， 經過多天調研及踩雷，最終決定基於vue-simple-uploader插件實現該功能，在項目中使用起來無痛且穩定。

如果你只是想實現基本的（非定制化的）上傳功能，直接使用vue-simple-uploader，多讀一下它的文檔，不需要更多的二次封裝。
如果你只是想實現全局上傳插件，也可以參照一下我的實現。
如果你用到了分片上傳、秒傳及斷點續傳這些復雜的功能，恭喜你，這篇文章的重點就在於此。

本文源碼在此：https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader

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幾個事件：