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 相关文章推荐
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
原生JS实现分页
Apr 19 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
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
python基础教程之循环介绍
2014/08/29 Python
python读取xlsx的方法
2018/12/25 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Django实现随机图形验证码的示例
2020/10/15 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
因工资原因离职的辞职信范文
2015/05/12 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
环保建议书作文500字
2015/09/14 职场文书
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
Mysql中常用的join连接方式
2022/05/11 MySQL
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python