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代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
Vue项目中使用flow做类型检测的方法
Mar 18 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制作新闻系统的思路
2006/10/09 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
php代码书写习惯优化小结
2013/06/20 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
10个简化PHP开发的工具
2014/12/25 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
JQuery下拉框应用示例介绍
2014/04/23 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
完善的jquery处理机制
2016/02/21 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
python交换两个变量的值方法
2019/01/12 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python标准库os库的函数介绍
2020/02/12 Python
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
收入证明申请书
2015/06/12 职场文书
药房管理制度范本
2015/08/06 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
python元组打包和解包过程详解
2021/08/02 Python
Java 定时任务技术趋势简介
2022/05/04 Java/Android