【uploader】表格化自整理vue-simple-uploader的文档（超详细）

轮子的github链接：两个项目的文档要结合着看才可以

# vue-simple-uploader
https://github.com/simple-uploader/vue-uploader/blob/master/README_zh-CN.md

# simple-uploader
https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#%E9%85%8D%E7%BD%AE
1
2
3
4
5

具体使用建议看博客的另外两篇文章【uploader】

然后如果想要参考博主对该组件的使用的探索过程以及使用情况，可以查看主页中的uploader的几篇文章，那是简单记录自己对该组件的探索。

1.vue-simple-uploader介绍

超级强大的上传文件的前端vue组件，相比elementui的upload组件，其能满足绝大多数的文件上传需求。包括断续重传等常见业务。而elementui的upload组件很多功能都不能实现。但是两者可以相互兼容着使用。

• 支持文件、多文件、文件夹上传
• 支持拖拽文件、文件夹上传
• 可暂停、继续上传
• 支持断点续传、秒传
• 支持进度、预估剩余时间、出错自动重试、重传等操作
• 上传队列管理，支持最大并发上传，支持分块上传

为了方便查看，这里copy一下quickstart代码，uploader只有这几个标签，但是会有很多属性和方法。

<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 {
    data () {
      return {
        options: {
          // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
          target: '//localhost:3000/upload',
          testChunks: false
        },
        attrs: {
          accept: 'image/*'
        }
      }
    }
  }
</script>

<style>
  .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>
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

2.安装和配置

npm install vue-simple-uploader --save
1

# 在main.js中
import uploader from 'vue-simple-uploader'
Vue.use(uploader)
1
2
3

3. 组件标签的文档整理

一共有如下几个标签：

• uploader

• uploader-btn

• uploader-drop

• uploader-list

• uploader-file

3.1 uploader标签

根组件标签，可理解为一个上传器

Props属性：

补充options的可配置项【常用的优先，△标记为重要，其他没写的都是默认为最优】：

Slot事件：

methods方法：

需要得到uploader实例

# 我们先给uploader标签指定ref
<uploader :options="options" class="uploader-example" ref="uploader">
# 然后可以从当前vue组件的子组件refs列表里获取uploader组件，uploader组件有个uploader属性表示uploader组件本身
const uploaderInstance = this.$refs.uploader.uploader
# 然后实例.方法就可以使用了
1
2
3
4
5

3.2 uploader-btn标签

点击后能够展示文件选择器的按钮。一般就只使用directory参数

props属性：

3.3 uploader-drop标签

声明该区域允许拖动文件进来后上传

3.4 uploader-list标签

一个列表外标签，类似于form一样，仅仅是用来装载uploader-file组件的容器。
下面有使用演示

3.5 uploader-file标签

就是你拉取后的一个文件单位对象，可以展示，拥有自己的很多属性可以展示。

Props属性：

slot插槽：就是通过file对象能直接的file信息

简单演示一下list和file的使用，用于可视化文件上传进度

• uploader设置自动上传为false: `autoStart=“false”
• 在uploader内引入uploader-list
• 通过slot-scope绑定文件实例，选择文件后自动传递实例
• v-for展示uploader-file即可，file实例的属性、方法和事件看上方文档，自己设计可视化即可

<uploader 
	:options="this.options" 
	@file-added="this.fileAdded" 
	@file-error="this.fileError" 
	@file-success="this.fileSuccess" 
	:autoStart="false">
	<uploader-unsupport></uploader-unsupport>
	<uploader-btn class="uploader-btn">点击上传</uploader-btn>
	 
	<uploader-list>
		<!--通过slot-scope绑定文件实例-->
	     <div slot-scope="props">
	         <div v-for="(file,i) in props.fileList" :key="i">
	             <uploader-file :list="true" :file="file"></uploader-file>
	         </div>
	     </div>
	 </uploader-list>
</uploader>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

原生的效果长这样。

3.6 uploader-unsopport标签

不支持 HTML5 File API 的时候会显示。

一般就写在uploader根组件里就行了，遇到低版本的浏览器不兼容组件的时候才会展示。

<uploader :options="options" class="uploader-example">
	<uploader-unsupport></uploader-unsupport>
    
</uploader>
1
2
3
4

4.请求中的参数

可通过 query 参数配置扩充，也可以通过 processParams 自定义

• chunkNumber，当前分片
• chunkSize，分片上限大小
• currentChunkSize，当前分片的真实大小
• totalSize，文件总大小
• identifier，唯一标识，可自定义
• filename，文件名
• totalChunks，总分片数量
• 从totalChunks往下，是自己在options配置中配置的query参数，比如我配置了curUrl这个参数

然后如果想要参考博主对该组件的使用的探索过程以及使用情况，可以查看主页中的uploader的几篇文章，那是简单记录自己对该组件的探索。