Vue上传组件vue Simple Uploader的用法示例


Posted in Javascript onAugust 25, 2017

在日常开发中经常会遇到文件上传的需求,vue-simple-uploader 就是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件,自带 UI,可覆盖、自定义;先来张动图看看效果:

Vue上传组件vue Simple Uploader的用法示例

其主要特点就是:

  • 支持文件、多文件、文件夹上传
  • 支持拖拽文件、文件夹上传
  • 统一对待文件和文件夹,方便操作管理
  • 可暂停、继续上传
  • 错误处理
  • 支持“快传”,通过文件判断服务端是否已存在从而实现“快传”
  • 上传队列管理,支持最大并发上传
  • 分块上传
  • 支持进度、预估剩余时间、出错自动重试、重传等操作

安装

通过npm安装:npm install vue-simple-uploader --save即可。

使用

初始化

import Vue from 'vue'
import uploader from 'vue-simple-uploader'
import App from './App.vue'

Vue.use(uploader)

/* eslint-disable no-new */
new Vue({
 render(createElement) {
  return createElement(App)
 }
}).$mount('#app')

App.vue

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

组件

Uploader

上传根组件,可理解为一个上传器。

Props

options {Object}

参考 simple-uploader.js 配置。

autoStart {Boolean}

默认 true, 是否选择文件后自动开始上传。

事件

  • upload-start 开始上传。
  • file-added(file) 添加了一个文件,一般用作文件校验,如果给 file 增加 ignored 属性为 true 的话就会被过滤掉。
  • file-removed(file) 移除一个文件(文件夹)。
  • files-submitted(files, fileList) 所选择的文件们添加到上传队列后触发。

作用域插槽

  • files {Array}纯文件列表,没有文件夹概念。
  • fileList {Array}统一对待文件、文件夹列表。
  • started是否开始上传了。

UploaderBtn

点选上传文件按钮。

Props

directory {Boolean}

默认 false, 是否是文件夹上传。

single {Boolean}

默认 false, 如果设为 true,则代表一次只能选择一个文件。

attrs {Object}

默认 {}, 添加到 input 元素上的额外属性。

UploaderDrop

拖拽上传区域。

UploaderList

文件、文件夹列表,同等对待。

作用域插槽

fileList {Array}

文件、文件夹组成数组。

UploaderUnsupport

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

UploaderFiles

文件列表,没有文件夹概念,纯文件列表。

Props

file {Uploader.File}

封装的文件实例。

list {Boolean}

如果是在 UploaderList 组件中使用的话,请设置为 true。

作用域插槽

  • file {Uploader.File}文件实例。
  • list {Boolean}是否在 UploaderList 组件中使用。
  • status {String}当前状态,可能是:success, error, uploading, paused, waiting
  • name {String}文件名字。
  • paused {Boolean}是否暂停了。
  • error {Boolean}是否出错了。
  • averageSpeed {Number}平均上传速度,单位字节每秒。
  • formatedAverageSpeed {String}格式化后的平均上传速度,类似:3 KB / S。
  • currentSpeed {Number}当前上传速度,单位字节每秒。
  • isComplete {Boolean}是否已经上传完成。
  • isUploading {Boolean}是否在上传中。
  • size {Number}文件或者文件夹大小。
  • formatedSize {Number}格式化后文件或者文件夹大小,类似:10 KB.
  • uploadedSize {Number}已经上传大小,单位字节。
  • progress {Number}介于 0 到 1 之间的小数,上传进度。
  • progressStyle {String}进度样式,transform 属性,类似:{transform: '-50%'}.
  • progressingClass {String}正在上传中的时候值为:uploader-file-progressing。
  • timeRemaining {Number}预估剩余时间,单位秒。
  • formatedTimeRemaining {String}格式化后剩余时间,类似:3 miniutes.
  • type {String}文件类型。
  • extension {String}文件名后缀,小写。
  • fileCategory {String}文件分类,其中之一:folder, document, video, audio, image, unknown。

项目

地址:https://github.com/simple-uploader/vue-uploader。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 #Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 #Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 #Javascript
Vue.js进行查询操作的实例详解
Aug 25 #Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 #Javascript
Vue.js框架路由使用方法实例详解
Aug 25 #Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 #Javascript
You might like
牡丹941资料
2021/03/01 无线电
一个多文件上传的例子(原创)
2006/10/09 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
jQuery 动画基础教程
2008/12/25 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
留学自荐信写作方法
2014/01/27 职场文书
合作意向书格式及范文
2014/03/31 职场文书
听证通知书
2015/04/24 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
Python函数式编程中itertools模块详解
2021/09/15 Python
MySQL学习之基础命令实操总结
2022/03/19 MySQL