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

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

其主要特点就是:

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

安装

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

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

(0)

相关推荐

  • require.js+vue开发微信上传图片组件

    由于项目是thinkPHP做后端框架,一直以来都是多页面的后端路由,想使用火热的webpack有点无从下手(原谅我太菜,而且推广vue只有我一个人--),没办法,想把vue用起来,唯有在原来的基础上改进.使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件,这样每一个组件就是一个 .vue 文件,哪里用上这个组件就引入进来,维护起来确实很爽.然而一直以来项目用的都是require.js,那又想以这样的形式来组织vue组件,还要加上vue-router和vue-resou

  • vue上传图片组件编写代码

    本文实例教大家如何编写一个vue上传图片组件,具体如下 1.首先得有一个[type=file]文件标签并且隐藏,changge事件来获取图片: <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> 2.触发隐藏的文件标签:(通过原生的click来触发) document.ge

  • vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

    一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期

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

    在日常开发中经常会遇到文件上传的需求,vue-simple-uploader 就是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件,自带 UI,可覆盖.自定义:先来张动图看看效果: 其主要特点就是: 支持文件.多文件.文件夹上传 支持拖拽文件.文件夹上传 统一对待文件和文件夹,方便操作管理 可暂停.继续上传 错误处理 支持"快传",通过文件判断服务端是否已存在从而实现"快传" 上传队列管理,支持最大并发上传 分块上传 支持进度.预估剩

  • 在vue项目中使用element-ui的Upload上传组件的示例

    本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess&quo

  • vue 实现上传组件

    1.介绍 效果如下图 2.思路 文件上传的两种实现方式 1.From形式 <form method="post" enctype="multipart/from-data" action="api/upload" > <input type="file name="file"> <button type="submit">Submit</button>

  • vue iView 上传组件之手动上传功能

    基于 Vue 的 UI 组件库现在已经有很多了,尤其是移动端的.现在又多了一个 iView . iView 主要服务于 PC 界面的中后台业务,是一套高质量的开源 UI 组件库,先上地址: https://github.com/iview/iview 官网是: https://www.iviewui.com/ 特性 使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持 ES2015 高质量.功能丰富 友好的 API ,自由灵活地使用空间 详细.友好的

  • vue+elementUi图片上传组件使用详解

    上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息.加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑. upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:non

  • vue图片上传组件使用详解

    vue图片上传组件,供大家参考,具体内容如下 最近在做项目的时候顺便补充了一下公司项目的公共组件库,刚刚手头事情告一段落,就来做个笔记. 首先来看看最终效果 1.不允许删除 2.允许用户删除(显示删除按钮) 实现的效果就是上图显示内容 接下来说说组件布局那部分直接上代码了 <template> <div class="uploadImg"> <div class="upload-content"> <div class=&q

  • Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

    本文实例讲述了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能.分享给大家供大家参考,具体如下: 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下.演示在网址打开后的show.gif中. 使用技术:Vue.js | node.js | express | MongoDB. github网址:https://github.com/neroneroffy/privat

  • vue 图片裁剪上传组件的实现

    先看一下总体效果: 上传文件做了大小和类型的限制,在动图中无法展现出来. 使用file类型的input实现选择本地文件 但是浏览器原生的文件上传按钮的颜值不尽人意,而且按钮上的文字是无法改变的,我需要把这个上传文件的按钮改造一下. 方法1:使用label元素来触发一个隐藏的file类型的 input元素:(缺点:在多人开发时,可能出现重复的元素id,导致难以预料的bug) <input type="file" id='up_file_input' v-show='false' &

  • 封装一个Vue文件上传组件案例详情

    目录 前言 1. 子组件 2 父组件使用 3.效果 4.总结 前言 在面向特定用户的项目中,引 其他ui组件库导致打包体积过大,首屏加载缓慢,还需要根据UI设计师设计的样式,重写大量的样式覆盖引入的组件库的样式.因此尝试自己封装一个自己的组件,代码参考了好多前辈的文章 1. 子组件 <template> <div class="digital_upload"> <input style="display: none" @change=&

  • vue上传文件formData上传的解决全流程

    目录 vue上传文件formData上传解决 axios实例的配置关键配置 整体流程解决跨域上传文件跨域上传FormData格式等问题 vue 批量上传文件 简单说明一个实现思路 vue上传文件formData上传解决 axios实例的配置关键配置 FormData 上传文件类型有变项目中封装的公共方法需要更改头部请求信息设置为设为 “multipart/form-data” 整体流程解决跨域上传文件跨域上传FormData格式等问题 vue中Dom结构 <input type="file

随机推荐

其他