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

【uploader】表格化自整理vue-simple-uploader的文档（超详细） 文章目录1.vue-simple-uploader介绍2.安装和配置3. 组件标签的文档整理3.1 uploader标签3.2 uploader-btn标签3.3 uploader-drop标签3.4 uploader-list标签3.5 uploader-file标签3.6 uploader-unsopport标签4.请求中的参数

推荐整理分享【uploader】表格化自整理vue-simple-uploader的文档（超详细）(表格uplook)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:excel表格upper,upload sheet,official表格,upper excel,uph表格,表格uplook,excel表格up,excel表格up,内容如对您有帮助，希望把文章链接给更多的朋友！

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

# vue-simple-uploaderhttps://github.com/simple-uploader/vue-uploader/blob/master/README_zh-CN.md# simple-uploaderhttps://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#%E9%85%8D%E7%BD%AE

具体使用建议看博客的另外两篇文章【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>2.安装和配置npm install vue-simple-uploader --save# 在main.js中import uploader from 'vue-simple-uploader'Vue.use(uploader)3. 组件标签的文档整理

一共有如下几个标签：

uploader

uploader-btn

uploader-drop

uploader-list

uploader-file

3.1 uploader标签

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

Props属性：

参数说明类型可选值默认options最重要的配置项，读取配置项后建立上传器Object-{}autoStart是否选择后就立即自动上传booleantrue/falsetruefileStatusText根据服务端返回的状态码做出反应，默认即可Object-{ success: ‘success’, error: ‘error’, uploading: ‘uploading’, paused: ‘paused’, waiting: ‘waiting’ }

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

参数说明类型可选值默认△target目标上传的url，必填String-‘/’△singleFile单文件上传，如果设置了true，则选择多个文件的时候，只有最后一个会被上传booleantrue/falsefalse△chunkSize分块，单个数据块的值大小，用于分块上传实现断续重传number-1*1024*1024【1Mb】forceChunkSize是否强制所有的块都一定小于等于chunkSizeboolean-false△simultaneousUploads并发上传数number-3fileParameterName上传文件的时候文件的参数名，默认是multipart上传，参数名默认是fileString-“file”△query请求url时候携带的其他参数json-{}headers设置请求头信息json-{}△withCredentials标准的CORS请求是不会带上cookie的，如果想要带上需要设置为truebooleantrue/falsefalsemethod当前上传文件使用的方式，默认与form表单一样multipartStringmultipart/octet“multipart”testMethod测试接口的时候使用的HTTP方法String“GET”/“POST”默认"GET"△uploadMethod真正上传的时候使用的 HTTP 方法String“GET”/“POST”默认"POST"prioritizeFirstAndLastChunk对于文件而言是否高优先级发送第一个和最后一个块。一般用来发送到服务端，然后判断是否是合法文件；例如图片或者视频的 meta 数据一般放在文件第一部分，这样可以根据第一个块就能知道是否支持booleantrue/falsefalse△testChunks是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等【一般默认】booleantrue/falsetrue△checkChunkUploadedByResponse值为一个函数，不可以直接编写函数。是服务器分片校验函数，与上方的testChunks共用，是秒传和断点续传的基础。根据结果返回的响应体参数判断，return true或者false函数maxChunkRetries最大重试次数number-0chunkRetryInterval重试间隔，null表示立即重试number-null△processParams直接在options对象中编写名为processParams函数即可。自定义每一次分片传给后台的参数，params是该方法返回的形参，包含分片信息。实际情况根据接口约定调整，返回一个json对象函数

Slot事件：

name说明file-added(file)添加了一个文件的事件，一般用作文件校验files-added(files, fileList)添加了一批文件事件，一般用做一次选择的多个文件进行校验file-success(rootFile, file, message, chunk)文件成功上传，第一个参数rootFile是或包含File对象，file是File对象，message是服务端响应内容字符串，chunk是chunk实例，应该是本文件最后一个块实例。chunk.xhr.status就是这个文件上传的响应码file-progress(rootFile, file, chunk)一个文件正在上传事件file-removed(file)一个文件被移除file-error(rootFile, file, message, chunk)文件上传过程出错

methods方法：

需要得到uploader实例

# 我们先给uploader标签指定ref<uploader :options="options" class="uploader-example" ref="uploader"># 然后可以从当前vue组件的子组件refs列表里获取uploader组件，uploader组件有个uploader属性表示uploader组件本身const uploaderInstance = this.$refs.uploader.uploader# 然后实例.方法就可以使用了方法说明upload()开始或者继续上传pause()暂停上传resume()继续上传progress()返回一个0-1的浮点数，表示当前上传进度isUploading()返回一个布尔值标示是否还有文件正在上传中cancel()文件会被移除掉addFile(file)添加一个原生的文件对象到上传列表中removeFile(file)从上传列表中移除一个指定的 Uploader.File 实例对象getSize()上传文件的总大小timeRemaining()剩余时间，单位秒；这个是基于平均上传速度计算出来的，如果说上传速度为 0，那么这个值就是 Number.POSITIVE_INFINITYon(event, callback)监听各种事件3.2 uploader-btn标签

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

props属性：

参数说明类型可选值默认directory表示当前上传是否是文件夹上传，如果true则只能选择文件夹booleantrue/falsefalsesingle表示是否一次只能选择一个文件，如果false则可以多选booleantrue/falsefalseattrs添加到input元素上的额外属性。因为文件上传的本质是一个input文档对象，比如input元素有的accept="image/*"表示只允许图片上传json objectaccept等{}3.3 uploader-drop标签