目前在實現檔案上傳功能，使用vue-simple-uploader

<template>
  <div id="global-uploader">
    <uploader
      :options="simpleUploader.options"
      :key="simpleUploader.uploaderKey"
      @file-success="onFileSuccess"
      @file-complete="onFileComplete"
      @file-progress="onFileProgress"
      @file
 
-added="onFileAdded"
      @files-added="onFilesAdded"
      @files-submitted="onFilesSubmitted"
      @file-removed="onFileRemoved"
      @file-retry="onFileRetry"
      @file-error="onFileError"
      @upload-start="onUploadStart"
      @complete="complete"
      class="uploader-example"
      ref
 
="uploader"
    >
      <uploader-unsupport></uploader-unsupport>

      <!-- select file -->
      <uploader-btn
        class="global-uploader-btn"
        :attrs="simpleUploader.attrs"
        ref="uploadFileBtn"
      />

      <!-- select folder -->
      <uploader-btn
        class
 
="global-uploader-btn"
        :directory="true"
        ref="uploadFolderBtn"
      />

      <uploader-list v-show="uploaderPanelShow">
        <div
          class="file-panel"
          slot-scope="props"
          :class="{'collapse': collapse}"
        >
          <div class="file-title">
            <p class="file-list-title">檔案列表</p>
            <div class="operate">
              <el-button
                type="text"
                @click="operate"
                :title="collapse ? '摺疊':'展開' "
              >
                <i
                  class="icon"
                  :class="collapse ? 'el-icon-caret-bottom': 'el-icon-caret-top'"
                ></i>
              </el-button>
              <el-button
                type="text"
                @click="close"
                title="關閉"
              >
                <i class="icon el-icon-close"></i>
              </el-button>
            </div>
          </div>

          <ul
            class="file-list"
            :class="collapse ? 'uploader-list-ul-show': 'uploader-list-ul-hidden'"
          >
            <li
              v-for="file in props.fileList"
              :key="file.id"
            >
              <uploader-file
                :class="'file_' + file.id"
                ref="files"
                :file="file"
                :list="true"
              ></uploader-file>
            </li>
            <div
              class="no-file"
              v-if="!props.fileList.length"
            ><i class="icon icon-empty-file"></i> 暫無待上傳檔案</div>
          </ul>

        </div>
      </uploader-list>

    </uploader>
  </div>
</template>

<script>

export default {
  name: 'globalUploader',
  data () {
    return {
      // 選擇檔案後，展示上傳panel
      uploaderPanelShow: false,
      collapse: true,
      /**
       * 初始化元件 vue-simple-uploader
       */
      simpleUploader: {
        // 這個用來重新整理元件--解決不重新整理頁面連續上傳的快取上傳資料（注：每次上傳時，強制這個值進行更改---根據自己的實際情況重新賦值）
        uploaderKey: new Date().getTime(),
        // 元件例項化時傳入的配置項
        options: {
          // 目標上傳 URL，可以是字串也可以是函式，如果是函式的話，則會傳入 Uploader.File 例項、當前塊 Uploader.Chunk 以及是否是測試模式
          target: 'http://47.92.226.24:8091/uploader/slicing-upload',
          // 單檔案上傳。覆蓋式，如果選擇了多個會把之前的取消掉
          singleFile: false,
          // 分塊時按照該值來分，最後一個上傳塊的大小是可能是大於等於1倍的這個值但是小於兩倍的這個值大小
          chunkSize: 1 * 1024 * 1024,
          // 是否強制所有的塊都是小於等於 chunkSize 的值
          forceChunkSize: false,
          // 併發上傳數
          simultaneousUploads: 3,
          // 上傳檔案時檔案的引數名
          fileParameterName: 'file',
          // 其他額外的引數，這個可以是一個物件或者是一個函式，如果是函式的話，則會傳入 Uploader.File 例項、當前塊 Uploader.Chunk 以及是否是測試模式
          query: {},
          // 額外的一些請求頭，如果是函式的話，則會傳入 Uploader.File 例項、當前塊 Uploader.Chunk 以及是否是測試模式
          headers: {},
          // 標準的 CORS 請求是不會帶上 cookie 的，如果想要帶的話需要設定 withCredentials 為 true
          withCredentials: false,
          // 當上傳的時候所使用的是方式，可選 multipart、octet
          method: 'multipart/form-data',
          // 測試的時候使用的 HTTP 方法，可以是字串或者函式，如果是函式的話，則會傳入 Uploader.File 例項、當前塊 Uploader.Chunk
          testMethod: 'GET',
          // 真正上傳的時候使用的 HTTP 方法，可以是字串或者函式，如果是函式的話，則會傳入 Uploader.File 例項、當前塊 Uploader.Chunk
          uploadMethod: 'POST',
          // 如果說一個檔案已經上傳過了是否還允許再次上傳。預設的話如果已經上傳了，除非你移除了否則是不會再次重新上傳的
          allowDuplicateUploads: false,
          // 對於檔案而言是否高優先順序傳送第一個和最後一個塊。一般用來發送到服務端，然後判斷是否是合法檔案；例如圖片或者視訊的 meta 資料一般放在檔案第一部分，這樣可以根據第一個塊就能知道是否支援
          prioritizeFirstAndLastChunk: false,
          // 是否測試每個塊是否在服務端已經上傳了，主要用來實現秒傳、跨瀏覽器上傳等
          testChunks: false,
          // 伺服器分片校驗函式 秒傳及斷點續傳的基礎(true:不用傳 false:需要傳)
          // checkChunkUploadedByResponse: (chunk, message) => {
          // 這裡根據實際業務來 用來判斷哪些片已經上傳過了 不用再重複上傳了 [這裡可以用來寫斷點續傳！！！]
          // return false
          // },
          // 可選的函式，每個塊在測試以及上傳前會被呼叫，引數就是當前上傳塊例項 Uploader.Chunk，注意在這個函式中你需要呼叫當前上傳塊例項的 preprocessFinished 方法
          preprocess: null,
          // 可覆蓋預設的生成檔案唯一標示的函式
          generateUniqueIdentifier: null,
          // 最大自動失敗重試上傳次數，值可以是任意正整數，如果是 undefined 則代表無限次
          maxChunkRetries: 2,
          // 重試間隔，值可以是任意正整數，如果是 null 則代表立即重試
          chunkRetryInterval: null,
          // 進度回撥間隔
          progressCallbacksInterval: 500,
          // 主要用於計算平均速度，值就是從 0 到 1，如果是 1 那麼上傳的平均速度就等於當前上傳速度，如果說長時間上傳的話，建議設定為 0.02，這樣剩餘時間預估會更精確，這個引數是需要和 progressCallbacksInterval 一起調整的
          speedSmoothingFactor: 0.1,
          // 認為響應式成功的響應碼
          successStatuses: [200, 201, 202],
          // 認為是出錯的響應碼
          permanentErrors: [404, 415, 500, 501],
          // 初始檔案 paused 狀態
          initialPaused: false,
          // 用於格式化你想要剩餘時間，一般可以用來做多語言
          parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
            // timeRemaining{Number}, 剩餘時間，秒為單位
            // parsedTimeRemaining{String}, 預設展示的剩餘時間內容
            return parsedTimeRemaining
              .replace(/\syears?/, '年')
              .replace(/\days?/, '天')
              .replace(/\shours?/, '小時')
              .replace(/\sminutes?/, '分鐘')
              .replace(/\sseconds?/, '秒')
          }
        },
        // 是否選擇檔案後自動開始上傳
        autoStart: true,
        statusText: {
          success: '成功',
          error: '失敗',
          uploading: '上傳中',
          paused: '暫停',
          waiting: '等待'
        },
        // 用於轉換檔案上傳狀態文字對映物件
        fileStatusText: function (status, response) {
          // 第一個 status 為狀態，第二個為響應內容
          const statusTextMap = {
            success: '成功',
            error: '失敗',
            uploading: '上傳中',
            paused: '暫停',
            waiting: '等待'
          }
          return statusTextMap[status]
        },
        // 新增到 input 元素上的額外屬性
        attrs: {}
      }

    }
  },
  // 鉤子函式：頁面載入完成後執行
  mounted: function () {
    console.log(1111)
    // this.openFileUploader()
  },
  methods: {
    /**
     * 觸發檔案上傳的按鈕
     */
    openFileUploader: function () {
      console.log(2222)
      this.$refs.uploadFileBtn.$el.click()
    },

    /**
     * 觸發資料夾上傳的按鈕
     */
    openFolderUploader: function () {
      this.$refs.uploadFolderBtn.$el.click()
    },

    /**
     * 摺疊、展開面板動態切換
     */
    operate: function () {
      if (this.collapse === false) {
        this.collapse = true
      } else {
        this.collapse = false
      }
    },

    /**
     * 關閉摺疊面板
     */
    close () {
      this.uploaderPanelShow = false
    },

    /**
     * 事件
     * 一個檔案上傳成功
     *
     * @param {object} rootFile 成功上傳的檔案所屬的根 Uploader.File 物件，它應該包含或者等於成功上傳檔案
     * @param {object} file 當前成功的 Uploader.File 物件本身
     * @param {object} message 服務端響應內容，永遠都是字串
     * @param {object} chunk Uploader.Chunk 例項，它就是該檔案的最後一個塊例項，如果你想得到請求響應碼的話，chunk.xhr.status 就是
     */
    onFileSuccess: function (rootFile, file, message, chunk) {
      console.log(`檔案: ${file.name} 上傳成功`)
    },

    /**
     * 事件
     * 一個根檔案（資料夾）成功上傳完成。
     */
    onFileComplete: function (rootFile) {
      console.log('觸發 onFileComplete 事件')
    },

    /**
     * 事件
     * 檔案上傳中觸發
     */
    onFileProgress (rootFile, file, chunk) {
      console.log(`上傳中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
    },

    /**
     * 事件:
     * 添加了一個檔案，一般用做檔案校驗，如果設定 file.ignored = true 的話這個檔案就會被過濾掉
     */
    onFileAdded: function (file) {
      this.uploaderPanelShow = true
    },

    /**
     * 事件
     * 和 fileAdded 一樣，但是一般用作多個檔案的校驗。
     */
    onFilesAdded: function (files, fileList, event) {
      this.uploaderPanelShow = true
    },

    /**
     * 事件
     * 和 filesAdded 類似，但是是檔案已經加入到上傳列表中，一般用來開始整個的上傳
     */
    onFilesSubmitted: function (files, fileList, event) {
      console.log('觸發 onFilesSubmitted 事件')
    },

    /**
     * 事件
     *  一個檔案（資料夾）被移除
     */
    onFileRemoved: function (file) {
      console.log(`檔案: ${file.name} 刪除成功`)
    },

    /**
     * 事件
     * 檔案重試上傳事件
     */
    onFileRetry: function (rootFile, file, chunk) {
      console.log(`檔案: ${file.name} 重試上傳`)
    },

    /**
     * 事件
     * 檔案上傳出錯
     */
    onFileError: function (rootFile, file, message, chunk) {
      console.log(`檔案: ${file.name} 上傳出錯`, message)
    },

    /**
     * 事件
     * 已經開始上傳了
     */
    onUploadStart: function () {
      console.log('觸發 onUploadStart 事件')
    },

    /**
     * 事件
     * 上傳完畢
     */
    complete: function () {
      console.log('觸發 complete 事件')
    }
  }
}
</script>

<style>
#global-uploader {
  position: fixed;
  z-index: 20;
  right: 15px;
  bottom: 15px;
  width: 550px;
}

.file-panel {
  background-color: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 7px 7px 0 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.file-title {
  display: flex;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border-bottom: 1px solid #ddd;
}

.file-title {
  background-color: #e7ecf2;
}

.uploader-file-meta {
  display: none !important;
}

.operate {
  flex: 1;
  text-align: right;
}

.file-list {
  position: relative;
  height: 240px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
  padding: 0px;
  margin: 0 auto;
  transition: all 0.5s;
}

.uploader-file-size {
  width: 15% !important;
}

.uploader-file-status {
  width: 32.5% !important;
  text-align: center !important;
}

li {
  background-color: #fff;
  list-style-type: none;
}

.no-file {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}

/* 隱藏上傳按鈕 */
.global-uploader-btn {
  display: none !important;
  clip: rect(0, 0, 0, 0);
  /* width: 100px;
  height: 50px; */
}

.file-list-title {
  /*line-height: 10px;*/
  font-size: 16px;
}

.uploader-file-name {
  width: 36% !important;
}

.uploader-file-actions {
  float: right !important;
}

.uploader-list-ul-hidden {
  height: 0px;
}
</style>