Vue-slice-uploader NPM

vue-slice-uploader

基于vue的文件上传插件支持文件切片上传，断点续传，暂停和重新上传。

Usage

npm install vue-slice-uploader -D

// ES6 import 
import vueSliceUploader from 'vue-slice-uploader' 
// 通过require 导入 
var  vueSliceUploader = require('vue-slice-uploader') 
// 通过use挂载 
Vue.use(vueSliceUploader) 
// 或者直接导入js文件 
<script src="./dist/vue-slice-uploader"></script>

<vue-slice-uploader ref="sliceUploader"
    action="http://localhost:5000/upload"
    @change="handleFileChange"
    @on-progress="handleFileProgress"
    @on-complete="handleFileComplete"
    :multiple="true">
</vue-slice-uploader>

Attributes

属性	描述	类型	值
chunkSize	切片的大小	Number	单位是Byte，默认是5M，即1024x1024x5
auto	是否自动上传	Boolean	true
multiple	是否可多文件上传	Boolean	false
showButton	是否显示上传按钮，若不显示则需手动调用start方法	Boolean	true
suffix	文件后缀名	String	*
action	文件上传请求路径	String
unique	是否对文件进行md5，保证文件唯一性，比较耗时	Boolean	false
headers	设置请求头	Object	需要服务端开启`Access-Control-Allow-Headers`
formData	设置formdata提交的参数	Object	{}

Methods

方法名	描述	参数
change	文件输入框变化监听	`function(files)`
on-progress	文件上传进程监听	`function(file,{code,percent,msg})`
on-complete	文件上传完成	`function(file){}`
on-speed	文件上传速率监听	`function(file,speed){}`
start	启动选择文件
upload	执行上传方法	待上传的文件列表

关于回调的文件对象

_index:文件所在列表的下标，可用于更新文件数组
_uploader:文件上传实例的引用
- pause(): 暂停上传任务
- restart(): 重新开始上传任务
- continue(): 继续上传任务

vue

@infinitebrahmanuniverse/nolb-vue-sl @everything-registry/sub-chunk-3092

7 years ago

7 years ago

7 years ago

7 years ago