在日常開發中經常會遇到文件上傳的需求，vue-simple-uploader 就是一個基於 simple-uploader.js 和 Vue 結合做的一個上傳組件，自帶 UI，可覆蓋、自定義；先來圖看看效果：
其主要特點就是：
支持文件、多文件、文件夾上傳支持拖拽文件、文件夾上傳統一對待文件和文件夾，方便操作管理可暫停、繼續上傳錯誤處理支持“快傳”，通過文件判斷服務端是否已存在從而實現“快傳”上傳隊列管理，支持最大併發上傳分塊上傳支持進度、預估剩餘時間、出錯自動重試、重傳等操作安裝
通過npm安裝：npm install vue-simple-uploader --save即可。
使用
初始化
import Vue from 'vue'
import uploader from 'vue-simple-uploader'
import App from './App.vue'
Vue.use(uploader)
/* eslint-disable no-new */
new Vue({
render(createElement) {
return createElement(App)
}
}).$mount('#app')
App.vue
<template>
<uploader>
<uploader-unsupport>
<uploader-drop>
Drop files here to upload or
<uploader-btn>select files/<uploader-btn>
<uploader-btn>select images/<uploader-btn>
<uploader-btn>select folder/<uploader-btn>
/<uploader-drop>
<uploader-list>
/<uploader>
/<template>
組件
Uploader
上傳根組件，可理解為一個上傳器。
Props
options {Object}參考 simple-uploader.js 配置。autoStart {Boolean}默認 true, 是否選擇文件後自動開始上傳。事件
upload-start開始上傳。file-added(file)添加了一個文件，一般用作文件校驗，如果給 file 增加 ignored 屬性為 true 的話就會被過濾掉。file-removed(file)移除一個文件（文件夾）。files-submitted(files, fileList)所選擇的文件們添加到上傳隊列後觸發。作用域插槽
files {Array}純文件列表，沒有文件夾概念。fileList {Array}統一對待文件、文件夾列表。started是否開始上傳了。UploaderBtn
點選上傳文件按鈕。
Props
directory {Boolean}默認 false, 是否是文件夾上傳。single {Boolean}默認 false, 如果設為 true，則代表一次只能選擇一個文件。attrs {Object}默認 {}, 添加到 input 元素上的額外屬性。UploaderDrop
拖拽上傳區域。
UploaderList
文件、文件夾列表，同等對待。
作用域插槽
fileList {Array}文件、文件夾組成數組。UploaderFiles
文件列表，沒有文件夾概念，純文件列表。
作用域插槽
files {Array}文件列表。UploaderUnsupport
不支持 HTML5 File API 的時候會顯示。
UploaderFile
文件、文件夾單個組件。
Props
file {Uploader.File}封裝的文件實例。list {Boolean}如果是在 UploaderList 組件中使用的話，請設置為 true。作用域插槽
file {Uploader.File}文件實例。list {Boolean}是否在 UploaderList 組件中使用。status {String}當前狀態，可能是：success, error, uploading, paused, waitingname {String}文件名字。paused {Boolean}是否暫停了。error {Boolean}是否出錯了。averageSpeed {Number}平均上傳速度，單位字節每秒。formatedAverageSpeed {String}格式化後的平均上傳速度，類似：3 KB / S。currentSpeed {Number}當前上傳速度，單位字節每秒。isComplete {Boolean}是否已經上傳完成。isUploading {Boolean}是否在上傳中。size {Number}文件或者文件夾大小。formatedSize {Number}格式化後文件或者文件夾大小，類似：10 KB.uploadedSize {Number}已經上傳大小，單位字節。progress {Number}介於 0 到 1 之間的小數，上傳進度。progressStyle {String}進度樣式，transform 屬性，類似：{transform: '-50%'}.progressingClass {String}正在上傳中的時候值為：uploader-file-progressing。timeRemaining {Number}預估剩餘時間，單位秒。formatedTimeRemaining {String}格式化後剩餘時間，類似：3 miniutes.type {String}文件類型。extension {String}文件名後綴，小寫。fileCategory {String}文件分類，其中之一：folder, document, video, audio, image, unknown。