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://127.0.0.1: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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432