vue-simple-uploader 是一個基於 simple-uploader.js 和 Vue 結合做的一個上傳元件，自帶 UI，可覆蓋、自定義。

特點：

支援檔案、多檔案、資料夾上傳
支援拖拽檔案、資料夾上傳
統一對待檔案和資料夾，方便操作管理
可暫停、繼續上傳
錯誤處理
支援“快傳”，通過檔案判斷服務端是否已存在從而實現“快傳”
上傳佇列管理，支援最大併發上傳
分塊上傳
支援進度、預估剩餘時間、出錯自動重試、重傳等操作

安裝

npm install vue-simple-uploader --save

初始化

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

App.vue

<template>
  <uploader :options="options" class="uploader-example">
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>Drop files here to upload or</p>
      <uploader-btn>select files</uploader-btn>
      <uploader-btn :attrs="attrs">select images</uploader-btn>
      <uploader-btn :directory="true">select folder</uploader-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
 </uploader>
</template>

<script>
export default {
  components:{
    
  },
  data(){
    return{
      options: {
        // 可通過 https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js 示例啟動服務
        target: '//localhost:3000/upload',
        autoStart: false,
        testChunks: false
      },
      attrs: {
        accept: 'image/*'
      }
    }
  },
  methods:{
    
  }
}
</script>


<style lang="less">
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
 

元件

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。