Vue上传组件vueSimpleUploader的用法示例_vue3获取后端数据处理来反映进度条资源-CSDN文库

156 浏览量 2020-12-11 11:13:24 上传评论收藏 78KB PDF 举报

资源推荐

资源详情

资源评论

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>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

weixin_38566180

粉丝: 2
资源: 967

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip