vue使用elementUI的upload上传文件封装

这篇文章的目的

将文件上传的方法封装一下,供大家统一调用,
话不多说,直接上代码

upload 核心参数说明

  1. action 上传的地址
  2. accept 接受上传的文件类型
  3. multiple 是否开启多文件上传模式
  4. limit 限制上传个数
  5. fileList 文件列表
  6. disabled 是否禁用

upload 核心方法说明

  • before-upload 上传文件之前的钩子.
  • on-success 上传成功的钩子函数
  • on-error 文件上传失败时的钩子
  • on-exceed 文件超出个数限制时的钩子
  • on-remove 文件列表移除文件时的钩子
  • on-preview 点击文件列表中已上传的文件时的钩子.
  • on-progress 文件上传时的钩子 进度条展示的基础

核心局部代码说明

html中

插槽的使用

子组件

   <slot name="uploadBtn"></slot>

调用上传组件的父组件

    <uploadBtn><template v-slot="uploadBtn"><img src='http://test/upload.img'></img></template></uploadBtn>

说明

使用了具名插槽 将上传的按钮放在父组件调用子组件标签的容器中,这样的好处是:随意定制按钮不需要写一堆的条件判断,且可定制上传按钮


js中

office 自动预览的使用

data定义office基础路径

    officeOnlineAddress:'https://view.officeapps.live.com/op/view.aspx?src=',

office基础路径拼接文件路径并预览

   const preveiewURL = this.officeOnlineAddress + targetwindow.open(preveiewURL)

说明

office基础路径拼接文件路径并用window.open即可实现文件的预览

beforeUpload 上传文件之前的拦截处理

代码

    beforeUpload(file) {const { name = '', size } = fileif (size > this.maxSize * 1024 * 1000) {this.$Message.warning(`文件最大仅支持${this.maxSize}M`)return false}if (!this.acceptTypeList.includes(name.split('.').pop())) {this.$Message.warning(`文件格式仅支持${this.acceptTypeList.join(',')}`)return false}},

说明

  • 文件大小大于父组件传入的maxSize则拦截并提示
  • 文件格式不正确则拦截并提示
  • beforeUpload函数体中,如果函数的返回值是false,则终止上传

文件预览的操作

代码

    preview (data) {const { url, response = {} } = data || {}let name = data.nameconst downLoadTypeList = this.downLoadTypeListconst preveiwTypeList = this.preveiwTypeListif (!name) {name = ''}const suffixFileType = name.split('.').pop()if (downLoadTypeList.includes(suffixFileType)) {//下载 'doc', 'docx', 'xlsx', 'xls', 'txt' 文件name = name.replace(/&/g, '') // & 不兼容const target = encodeURIComponent(Base64.encode(`${location.origin}/api/abk/web/v1/resource/file?fileId=${url || response.data}&fullfilename=${name}&sid=4AC67ADB4E264AB0A8B899A671072875`))if (this.officePreviewFlag &&this.officeType.includes(suffixFileType)) {// office预览的const preveiewURL = this.officeOnlineAddress + targetwindow.open(preveiewURL)} else {// 非office预览window.open(`https://test/preview/onlinePreview?url=${target}`,'_blank')}} else if (preveiwTypeList.includes(suffixFileType)) {//新窗口打开 预览图片文件window.open('/api/abk/web/v1/resource/file?fileId=' +(url || response.data),'_blank')}},

说明

  • 使用 name.split(‘.’).pop() 拿到文件的后缀名
  • 根据传入的 downLoadTypeList(需要下载的文件类型)、preveiwTypeList(可以直接预览的文件类型)、officePreviewFlag(office文件类型)以及officePreviewFlag(是否启用office预览)和文件后缀名匹配
  • 需要下载的文件类型 根据后端的下载基础路径拼接得到下载地址,并结合windwo.open下载
  • 可以直接预览的文件类型 根据后端的预览基础路径拼接得到下载地址,并结合windwo.open 预览
  • office文件类并且启用了office预览直接调用office预览路径(https://view.officeapps.live.com/op/view.aspx?src=)

进度条处理

html

<el-progress v-if="showProcessFlag&&processFlag" :percentage="loadProcess"></el-progress>

js

   onProgressFn(event, file, fileList){this.processFlag = truethis.loadProcess =  event.percent.toFixed(2)if(this.loadProcess>=100){this.loadProcess= 100this.$nextTick(()=>{this.processFlag = false})}}

说明

  • 用户启用了进度条(showProcessFlag为true) 并且 processFlag的值为true(当进度条的值存在并且小于100时)
  • 当进度大于等于100时需要隐藏进度条,为了保险起见,此处加了 $nextTick,当然了setTimeout(()=>{},0)也可以
<template><div><!--action="/api/abk/web/v1/resource/file" --><el-upload:action="actionUrl"style="width: 100%":on-success="(response, file) => successUpload(response, file)":on-error="errorUpload":accept="acceptTypeList.join('|')":before-upload="beforeUpload":multiple="multiple":limit="maxLimit":on-exceed="handleExceed":file-list="fileList":disabled="disabledFlag":on-remove="(file, fileList) => removeFile(file, fileList)":on-preview="(file) => preview(file)":on-progress="(event, file, fileList)=>onProgressFn(event, file, fileList)"><!-- 上传的按钮 或者 icon 通过具名插槽的方式 --><slot name="uploadBtn"></slot></el-upload><el-progress v-if="showProcessFlag&&processFlag" :percentage="loadProcess"></el-progress></div>
</template><script>
export default {name: 'UploadFile',props: {actionUrl: {//上传的地址type: String,default: '',},acceptTypeList: {//接受的文件类型type: Array,default: () => {return []//  ['doc', 'docx', 'xlsx', 'xls', 'txt', 'pdf','jpg','jpeg','png','zip,'rar']},},multiple: {//是否开启多图上传type: Boolean,default: false,},maxLimit: {// 最大上传个数限制type: Number | String,default: 1,},maxSize:{// 文件上传的最大体积 Mtype: Number | String,default: 4,},disabledFlag: {//是否禁用type: Boolean,default: false,},fileList: {//文件列表type: Array,default: () => {return []},},extraData: {}, //上传时的额外参数 如 name等/* {name:'12321'}*/dragFlag: {type: Boolean,default: true, //是否启用拖拽上传 此处默认启用  element 官方默认是 不启用的},downLoadTypeList: {//需要下载的文件类型type: Array,default: () => {return ['doc', 'docx', 'xlsx', 'xls', 'txt']},},preveiwTypeList: {//需要预览的文件类型type: Array,default: () => {return ['pdf', 'jpg', 'jpeg', 'png']},},officePreviewFlag: {//是否启用office在线预览type: Boolean,default: false,},showProcessFlag:{//是否显示进度条type: Boolean,default: false,},},// office预览// https://view.officeapps.live.com/op/view.aspx?src=// https://view.officeapps.live.com/op/view.aspx?src=文档地址//data() {return {officeOnlineAddress:'https://view.officeapps.live.com/op/view.aspx?src=',officeType: ['doc', 'docx', 'xlsx', 'xls'],processFlag:false,//是否显示进度条loadProcess:0//进度条的刻度值}},mounted() {},methods: {// 上传图片 成功successUpload(response, file) {if (response.rt.status === 200) {this.fileList.push({url: response.data,name: file.name,})} else {this.$Message.info(response.data)}},errorUpload(res) {this.$Message.info('上传失败请重试!')},beforeUpload(file) {const { name = '', size } = fileif (size > this.maxSize * 1024 * 1000) {this.$Message.warning(`文件最大仅支持${this.maxSize}M`)return false}if (!this.acceptTypeList.includes(name.split('.').pop())) {this.$Message.warning(`文件格式仅支持${this.acceptTypeList.join(',')}`)return false}},handleExceed(files, fileList) {this.$Message.warning(`当前限制选择 10 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`)},// 移除文件removeFile(file, data) {console.log(file, data)this.fileList = data},// 预览preview (data) {const { url, response = {} } = data || {}let name = data.nameconst downLoadTypeList = this.downLoadTypeListconst preveiwTypeList = this.preveiwTypeListif (!name) {name = ''}const suffixFileType = name.split('.').pop()if (downLoadTypeList.includes(suffixFileType)) {//预览 'doc', 'docx', 'xlsx', 'xls', 'txt' 文件name = name.replace(/&/g, '') // & 不兼容const target = encodeURIComponent(Base64.encode(`${location.origin}/api/abk/web/v1/resource/file?fileId=${url || response.data}&fullfilename=${name}&sid=4AC67ADB4E264AB0A8B899A671072875`))if (this.officePreviewFlag &&this.officeType.includes(suffixFileType)) {// office预览的const preveiewURL = this.officeOnlineAddress + targetwindow.open(preveiewURL)} else {// 非office预览window.open(`https://test/preview/onlinePreview?url=${target}`,'_blank')}} else if (preveiwTypeList.includes(suffixFileType)) {//新窗口打开 预览图片文件window.open('/api/abk/web/v1/resource/file?fileId=' +(url || response.data),'_blank')}},onProgressFn(event, file, fileList){this.processFlag = truethis.loadProcess =  event.percent.toFixed(2)if(this.loadProcess>=100){this.loadProcess= 100this.$nextTick(()=>{this.processFlag = false})}}},
}
</script><style lang="scss" scoped>
</style>List){this.processFlag = truethis.loadProcess =  event.percent.toFixed(2)if(this.loadProcess>=100){this.loadProcess= 100this.$nextTick(()=>{this.processFlag = false})}}},
}
</script><style lang="scss" scoped>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/72356.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

后端笔试题(2)分频器波形图

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口

第五课:C++实现加密PDF文档解密

目录 1.功能概述 2.示例代码 3.PDF加密原理 3.1.PDF加密方法 3.1.1。加密电脑本地PDF文件

算法通关村第十八关:青铜挑战-回溯是怎么回事

青铜挑战-回溯是怎么回事 回溯&#xff0c;最重要的算法之一 主要解决一些暴力枚举也搞不定的问题&#xff0c;例如组合、分割、子集、排列、棋盘等 从性能角度来看回溯算法的效率并不高&#xff0c;但对于这些暴力都搞不定的算法能出结果就很好了&#xff0c;效率低点没关系…

c++类与对象

文章目录 前言一、1、类的引入2、类的定义3、类的访问限定符及封装4、类的实例化5、类对象模型6、this指针7、封装 前言 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 C是基于面向对象的&#xff0c;关…

MySQL聚簇索引与非聚簇索引

分析&回答 当数据库一条记录里包含多个字段时&#xff0c;一棵B树就只能存储主键&#xff0c;如果检索的是非主键字段&#xff0c;则主键索引失去作用&#xff0c;变成顺序查找了。这时应该在第二个要检索的列上建立第二套索引。这个索引由独立的B树来组织。有两种常见的方…

2023国赛数学建模B题思路分析 - 多波束测线问题

# 1 赛题 B 题 多波束测线问题 单波束测深是利用声波在水中的传播特性来测量水体深度的技术。声波在均匀介质中作匀 速直线传播&#xff0c; 在不同界面上产生反射&#xff0c; 利用这一原理&#xff0c;从测量船换能器垂直向海底发射声波信 号&#xff0c;并记录从声波发射到…

vue基于Echarts、百度地图MapVGL实现可视化大屏数据展示

一、布局 常见的大屏数据展示布局&#xff0c;一般会将地图作为整个屏幕的背景&#xff0c;在地图上以九宫格布局展示各类数据图表。实现这一效果可以使地图的z-index1,在地图上的图表等z-index>1,下面会详细描述这种设计该如何实现&#xff1a; <div style"width…

Webpack插件与Webpack之间的关系

在Webpack中&#xff0c;插件&#xff08;plugins&#xff09;是用于扩展其功能的重要组成部分。Webpack是一个模块打包工具&#xff0c;用于将多个模块&#xff08;例如JavaScript文件、CSS文件、图片等&#xff09;打包成一个或多个最终的输出文件。插件允许你在Webpack的构建…

嵌入式开发笔试面试

C语言部分&#xff1a; 1.gcc的四步编译过程 1.预处理 展开头文件&#xff0c;删除注释、空行等无用内容&#xff0c;替换宏定义。 gcc -E hello.c -o hello.i 2.编译 检查语法错误&#xff0c;如果有错则报错&#xff0c;没有错误则生成汇编文件。 gcc -S hello.i -o h…

C++ vector模拟实现

目录 使用insert时迭代器失效使用erase时迭代器失效使用memcpy浅拷贝的问题调用最匹配的函数可能出现的问题模拟实现vector 使用insert时迭代器失效 在模拟vector插入的时候会遇到扩容后pos失效的问题&#xff0c;需要更新pos vector():_start(nullptr), _finish(nullptr), _e…

解耦只是一个巧合?

本文分享一篇在IJCAI2023看到的文章&#xff1a;Overlooked Implications of the Reconstruction Loss for VAE Disentanglement 首先回顾下VAE&#xff0c;其loss函数有两项&#xff0c;一项是重构误差&#xff0c;另一项是正则项&#xff1a; L r e c ( x , x ^ ) E q ϕ (…

电脑入门:路由器测试技术介绍及类型和方法

路由器测试技术介绍及类型和方法   一、测试的目的和内容   路由器是通过转发数据包来实现网络互连的设备,可以支持多种协议(例如TCP/IP,SPX/IPX,AppleTalk),可以在多个层次上转发数据包(例如数据链路层、网络层、应用层)…

【种树】Python 实现

1.题目 小明在直线的公路上种树&#xff0c;现在给定可以种树的坑位的数量和位置&#xff0c;以及需要种多少棵树苗&#xff0c;问树苗之间的最小间距是多少时&#xff0c;可以保证种的最均匀 (两棵树苗之间的最小间距最大) 输入描述 输入三行: 第一行一个整数: 坑位的数量 第…

Linux 中的 chage 命令及示例

chage命令用于查看和更改用户密码过期信息。当要为用户提供有限时间的登录或需要不时更改登录密码时,使用此命令。借助该命令,我们可以查看账户的时效信息、上次更改密码的日期、设置密码更改时间、一定时间后锁定账户等。 chage 命令的语法如下: 句法: chage [选项] 登录…

QT(9.1)对话框与事件处理

作业&#xff1a; 1. 完善登录框 点击登录按钮后&#xff0c;判断账号&#xff08;admin&#xff09;和密码&#xff08;123456&#xff09;是否一致&#xff0c;如果匹配失败&#xff0c;则弹出错误对话框&#xff0c;文本内容“账号密码不匹配&#xff0c;是否重新登录”&…

23062C++QT day2

封装一个结构体&#xff0c;结构体中包含一个私有数组&#xff0c;用来存放学生的成绩&#xff0c;包含一个私有变量&#xff0c;用来记录学生个数&#xff0c; 提供一个公有成员函数&#xff0c;void setNum(int num)用于设置学生个数 提供一个公有成员函数&#xff1a;void…

FPGA实战小项目3

基于FPGA的波形发生器 基于FPGA的波形发生器 基于FPGA的beep音乐播放器设计 基于FPGA的beep音乐播放器设计 基于FPGA的cordic算法实现DDS sin和cosine波形的产生 基于FPGA的cordic算法实现DDS sin和cosine波形的产生

MySQL的故事——查询性能优化

查询性能优化 文章目录 查询性能优化一、查询优化器的提示(hint)二、优化特定类型的查询 一、查询优化器的提示(hint) HIGH_PRIORITY和LOW_PRIORITY 这个提示告诉MySQL&#xff0c;当多个语句同时访问某一个表时&#xff0c;哪些语句的优先级相对高些&#xff0c;哪些相对低些…

无需公网IP,实现远程访问群晖Drive并挂载为电脑磁盘的方法

文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…

利用MQ实现mysql与elasticsearch数据同步

流程 1.声明exchange、queue、RoutingKey 2. 在hotel-admin中进行增删改&#xff08;SQL&#xff09;&#xff0c;完成消息发送 3. 在hotel-demo中完成消息监听&#xff0c;并更新elasticsearch数据 4. 测试同步 1.引入依赖 <!--amqp--> <dependency><groupId&…