強大的 Vue 上傳組件 vue-simple-uploader

在日常開發中經常會遇到文件上傳的需求，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

組件

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, waiting
• name {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。

閱讀更多 程序員界的彭于晏 的文章

關鍵字: 軟件 文件夾 上傳