vue-simple-uploader 文件上傳

目前在實現文件上傳功能，使用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>