vue-simple-uploader

目前在实现文件上传功能，使用vue-simple-uploader，目前初步封装了一个组件，详细内容日后补充：

<template><div id="global-uploader"><uploader:options="simpleUploader.options":key="simpleUploader.uploaderKey"@file-success="onFileSuccess"@file-complete="onFileComplete"@file-progress="onFileProgress"@file-added="onFileAdded"@files-added="onFilesAdded"@files-submitted="onFilesSubmitted"@file-removed="onFileRemoved"@file-retry="onFileRetry"@file-error="onFileError"@upload-start="onUploadStart"@complete="complete"class="uploader-example"ref="uploader"><uploader-unsupport></uploader-unsupport><!-- select file --><uploader-btnclass="global-uploader-btn":attrs="simpleUploader.attrs"ref="uploadFileBtn"/><!-- select folder --><uploader-btnclass="global-uploader-btn":directory="true"ref="uploadFolderBtn"/><uploader-list v-show="uploaderPanelShow"><divclass="file-panel"slot-scope="props":class="{'collapse': collapse}"><div class="file-title"><p class="file-list-title">文件列表</p><div class="operate"><el-buttontype="text"@click="operate":title="collapse ? '折叠':'展开' "><iclass="icon":class="collapse ? 'el-icon-caret-bottom': 'el-icon-caret-top'"></i></el-button><el-buttontype="text"@click="close"title="关闭"><i class="icon el-icon-close"></i></el-button></div></div><ulclass="file-list":class="collapse ? 'uploader-list-ul-show': 'uploader-list-ul-hidden'"><liv-for="file in props.fileList":key="file.id"><uploader-file:class="'file_' + file.id"ref="files":file="file":list="true"></uploader-file></li><divclass="no-file"v-if="!props.fileList.length"><i class="icon icon-empty-file"></i> 暂无待上传文件</div></ul></div></uploader-list></uploader></div>
</template><script>export default {name: 'globalUploader',data () {return {// 选择文件后，展示上传paneluploaderPanelShow: false,collapse: true,/*** 初始化组件 vue-simple-uploader*/simpleUploader: {// 这个用来刷新组件--解决不刷新页面连续上传的缓存上传数据（注：每次上传时，强制这个值进行更改---根据自己的实际情况重新赋值）uploaderKey: new Date().getTime(),// 组件实例化时传入的配置项options: {// 目标上传 URL，可以是字符串也可以是函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式target: 'http://47.92.226.24:8091/uploader/slicing-upload',// 单文件上传。覆盖式，如果选择了多个会把之前的取消掉singleFile: false,// 分块时按照该值来分，最后一个上传块的大小是可能是大于等于1倍的这个值但是小于两倍的这个值大小chunkSize: 1 * 1024 * 1024,// 是否强制所有的块都是小于等于 chunkSize 的值forceChunkSize: false,// 并发上传数simultaneousUploads: 3,// 上传文件时文件的参数名fileParameterName: 'file',// 其他额外的参数，这个可以是一个对象或者是一个函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式query: {},// 额外的一些请求头，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式headers: {},// 标准的 CORS 请求是不会带上 cookie 的，如果想要带的话需要设置 withCredentials 为 truewithCredentials: false,// 当上传的时候所使用的是方式，可选 multipart、octetmethod: 'multipart/form-data',// 测试的时候使用的 HTTP 方法，可以是字符串或者函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.ChunktestMethod: 'GET',// 真正上传的时候使用的 HTTP 方法，可以是字符串或者函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.ChunkuploadMethod: 'POST',// 如果说一个文件已经上传过了是否还允许再次上传。默认的话如果已经上传了，除非你移除了否则是不会再次重新上传的allowDuplicateUploads: false,// 对于文件而言是否高优先级发送第一个和最后一个块。一般用来发送到服务端，然后判断是否是合法文件；例如图片或者视频的 meta 数据一般放在文件第一部分，这样可以根据第一个块就能知道是否支持prioritizeFirstAndLastChunk: false,// 是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等testChunks: false,// 服务器分片校验函数 秒传及断点续传的基础(true:不用传 false:需要传)// checkChunkUploadedByResponse: (chunk, message) => {// 这里根据实际业务来 用来判断哪些片已经上传过了 不用再重复上传了 [这里可以用来写断点续传！！！]// return false// },// 可选的函数，每个块在测试以及上传前会被调用，参数就是当前上传块实例 Uploader.Chunk，注意在这个函数中你需要调用当前上传块实例的 preprocessFinished 方法preprocess: null,// 可覆盖默认的生成文件唯一标示的函数generateUniqueIdentifier: null,// 最大自动失败重试上传次数，值可以是任意正整数，如果是 undefined 则代表无限次maxChunkRetries: 2,// 重试间隔，值可以是任意正整数，如果是 null 则代表立即重试chunkRetryInterval: null,// 进度回调间隔progressCallbacksInterval: 500,// 主要用于计算平均速度，值就是从 0 到 1，如果是 1 那么上传的平均速度就等于当前上传速度，如果说长时间上传的话，建议设置为 0.02，这样剩余时间预估会更精确，这个参数是需要和 progressCallbacksInterval 一起调整的speedSmoothingFactor: 0.1,// 认为响应式成功的响应码successStatuses: [200, 201, 202],// 认为是出错的响应码permanentErrors: [404, 415, 500, 501],// 初始文件 paused 状态initialPaused: false,// 用于格式化你想要剩余时间，一般可以用来做多语言parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {// timeRemaining{Number}, 剩余时间，秒为单位// parsedTimeRemaining{String}, 默认展示的剩余时间内容return parsedTimeRemaining.replace(/\syears?/, '年').replace(/\days?/, '天').replace(/\shours?/, '小时').replace(/\sminutes?/, '分钟').replace(/\sseconds?/, '秒')}},// 是否选择文件后自动开始上传autoStart: true,statusText: {success: '成功',error: '失败',uploading: '上传中',paused: '暂停',waiting: '等待'},// 用于转换文件上传状态文本映射对象fileStatusText: function (status, response) {// 第一个 status 为状态，第二个为响应内容const statusTextMap = {success: '成功',error: '失败',uploading: '上传中',paused: '暂停',waiting: '等待'}return statusTextMap[status]},// 添加到 input 元素上的额外属性attrs: {}}}},// 钩子函数：页面加载完成后执行mounted: function () {console.log(1111)// this.openFileUploader()},methods: {/*** 触发文件上传的按钮*/openFileUploader: function () {console.log(2222)this.$refs.uploadFileBtn.$el.click()},/*** 触发文件夹上传的按钮*/openFolderUploader: function () {this.$refs.uploadFolderBtn.$el.click()},/*** 折叠、展开面板动态切换*/operate: function () {if (this.collapse === false) {this.collapse = true} else {this.collapse = false}},/*** 关闭折叠面板*/close () {this.uploaderPanelShow = false},/*** 事件* 一个文件上传成功** @param {object} rootFile 成功上传的文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传文件* @param {object} file 当前成功的 Uploader.File 对象本身* @param {object} message 服务端响应内容，永远都是字符串* @param {object} chunk Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status 就是*/onFileSuccess: function (rootFile, file, message, chunk) {console.log(`文件: ${file.name} 上传成功`)},/*** 事件* 一个根文件（文件夹）成功上传完成。*/onFileComplete: function (rootFile) {console.log('触发 onFileComplete 事件')},/*** 事件* 文件上传中触发*/onFileProgress (rootFile, file, chunk) {console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)},/*** 事件:* 添加了一个文件，一般用做文件校验，如果设置 file.ignored = true 的话这个文件就会被过滤掉*/onFileAdded: function (file) {this.uploaderPanelShow = true},/*** 事件* 和 fileAdded 一样，但是一般用作多个文件的校验。*/onFilesAdded: function (files, fileList, event) {this.uploaderPanelShow = true},/*** 事件* 和 filesAdded 类似，但是是文件已经加入到上传列表中，一般用来开始整个的上传*/onFilesSubmitted: function (files, fileList, event) {console.log('触发 onFilesSubmitted 事件')},/*** 事件*  一个文件（文件夹）被移除*/onFileRemoved: function (file) {console.log(`文件: ${file.name} 删除成功`)},/*** 事件* 文件重试上传事件*/onFileRetry: function (rootFile, file, chunk) {console.log(`文件: ${file.name} 重试上传`)},/*** 事件* 文件上传出错*/onFileError: function (rootFile, file, message, chunk) {console.log(`文件: ${file.name} 上传出错`, message)},/*** 事件* 已经开始上传了*/onUploadStart: function () {console.log('触发 onUploadStart 事件')},/*** 事件* 上传完毕*/complete: function () {console.log('触发 complete 事件')}}
}
</script><style>
#global-uploader {position: fixed;z-index: 20;right: 15px;bottom: 15px;width: 550px;
}.file-panel {background-color: #fff;border: 1px solid #e2e2e2;border-radius: 7px 7px 0 0;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}.file-title {display: flex;height: 40px;line-height: 40px;padding: 0 15px;border-bottom: 1px solid #ddd;
}.file-title {background-color: #e7ecf2;
}.uploader-file-meta {display: none !important;
}.operate {flex: 1;text-align: right;
}.file-list {position: relative;height: 240px;overflow-x: hidden;overflow-y: auto;background-color: #fff;padding: 0px;margin: 0 auto;transition: all 0.5s;
}.uploader-file-size {width: 15% !important;
}.uploader-file-status {width: 32.5% !important;text-align: center !important;
}li {background-color: #fff;list-style-type: none;
}.no-file {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 16px;
}/* 隐藏上传按钮 */
.global-uploader-btn {display: none !important;clip: rect(0, 0, 0, 0);/* width: 100px;height: 50px; */
}.file-list-title {/*line-height: 10px;*/font-size: 16px;
}.uploader-file-name {width: 36% !important;
}.uploader-file-actions {float: right !important;
}.uploader-list-ul-hidden {height: 0px;
}
</style>

vue-simple-uploader相关推荐

vue前端上传文件夹的插件_基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件...
1. 前言之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而后端大佬说我们要实现分片上传.秒传以及断点 ...
一个基于Vue的移动端多文件上传插件，支持常见图片的上传。
特性多文件上传上传图片预览上传状态监测删除指定图片清空图片重新上传安装 npm i vue-easy-uploader --save 使用在入口文件main.js中加入以下代码: im ...
【uploader】表格化自整理vue-simple-uploader的文档（超详细）
文章目录 1.vue-simple-uploader介绍 2.安装和配置 3. 组件标签的文档整理 3.1 uploader标签 3.2 uploader-btn标签 3.3 uploader-dro ...
Unknown custom element: ＜uploader＞ - did you register the component correctly? For recursive compone
vue文件上传控件报错,原因: 在main.js文件中,没有注册这个组件,导致出现了报错. 在main.js添加: import uploader from 'vue-simple-uploader' ...
vant步进器传值_Vant Uploader 文件上传
Vant Uploader 文件上传 Vant Uploader 文件上传组建主要实现手机端上传文件功能. 引入import Vue from 'vue'; import { Uploader } f ...
Springboot + Vue实现大文件切片上传
Springboot + Vue实现大文件切片上传大文件切片上传原理就是将一个大文件分成若干份大小相等的块文件,等所有块上传成功后,再将文件进行合并. 一.Springboot后端 1.实体TChu ...
h5使用vue+quagga识别条形码图片
最近有一个需求,要求扫描识别条形码,研究了各种方法,最后选定了拍照上传图片,然后使用quagga识别这一方案使用demo: 拍照上传图片这里尝试了两种方法,一种是原生的input实现,一种是使用了v ...
【vue】前端基于 vue-simple-uploader 实现大文件断点续传和分片上传
文章目录一.前言二.后端部分新建Maven 项目后端 pom.xml 配置文件 application.yml HttpStatus.java AjaxResult.java CommonCo ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
.NET开发框架(一)-框架介绍与视频演示
本文主要介绍一套基于.NET CORE的SPA高并发.高可用的开发框架. 我们暂且称它为:(让你懂.NET)开发框架. 以此为主线,陆续编写教程,讲述如何构建高并发.高可用的框架. (欢迎转载与分享) ...

vue-simple-uploader

vue-simple-uploader相关推荐

最新文章

热门文章