vue element el-upload附件上传、在线预览、下载当前预览文件
- 上传

- 在线预览(iframe):

- payload:

- response:

- 全部代码:
<template><div><el-table :data="tableData" border style="width: 100%"><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="province" label="省份"></el-table-column><el-table-column prop="city" label="市区"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column prop="zip" label="邮编"></el-table-column><el-table-column fixed="right" label="操作"><template slot-scope="scope"><el-button type="text" size="small">编辑</el-button><el-button @click="handleClick(scope.row)" type="text" size="small">上传文件</el-button></template></el-table-column></el-table><el-uploadclass="upload-demo"action="default"ref="uploadFile"style="display: none":http-request="uploadFilePdf":on-success="handleSuccess":limit="1":show-file-list="false"><el-button type="default" ref="upload">上传文件</el-button></el-upload><el-dialogv-if="viewDlg":title="viewDlgTitle"class="prj-view-dlg":visible.sync="viewDlg":fullscreen="true"append-to-bodyv-loading="diaLoading"><div class="iframe" style="height: 100%"><iframe:src="pageUrl"frameborder="0"height="100%"width="100%"scrolling="no"name="demo"></iframe></div><span slot="footer" class="dialog-footer"><el-button type="primary" @click="downloadFile">下 载</el-button><el-button @click="viewDlg = false">关 闭</el-button></span></el-dialog></div>
</template><script>
import axios from 'axios'
export default {name: "test",methods: {// 上传uploadFilePdf(params) {// this.tableLoading = true;const file = params.file;let lastName = file.name.substring(file.name.lastIndexOf("."), file.name.length).toLowerCase();if (lastName == ".pdf") {var formData = new FormData();formData.append("file", file); // 'file'名称要与后台约定好 一致axios.post(`/xxxxxx/${this.currentRowData.id}`, formData, {responseType: "blob", //这里是声明期望返回的数据类型,为blob}).then(result => {console.log(result);// this.tableLoading = false;if (result) {// 创建一个包含结果数据的URL,并在URL末尾添加"#toolbar=0"来隐藏工具栏this.pageUrl = window.URL.createObjectURL(result.data) + "#toolbar=0";this.viewDlgTitle = '文件预览';this.viewDlg = true;}})this.$refs.uploadFile.clearFiles();} else {this.$message({message: "请上传格式为.pdf类型的文件",type: "warning",});this.tableLoading = false;this.$refs.uploadFile.clearFiles();}},// 下载downloadFile() {let fileName = this.currentRowData.name + ".pdf";if ("download" in document.createElement("a")) {let a = document.createElement("a");a.href = this.pageUrl;a.download = fileName;a.style.display = "none";document.body.appendChild(a);a.click();URL.revokeObjectURL(a.href);document.body.removeChild(a);} else {navigator.msSaveBlob(blob, fileName);}},// 上传成功handleSuccess() {// this.tableLoading = false;},handleClick(row) {console.log(row);this.currentRowData = row;this.$refs.uploadFile.$children[0].$refs.input.click();}},data() {return {viewDlg: false,viewDlgTitle: '',pageUrl: '',currentRowData: {},diaLoading: false,tableData: [{date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,id: '534a9b92-21fc-446f-9c99-2d123f927ed5'}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1517 弄',zip: 200333,id: '111'}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1519 弄',zip: 200333,id: '222'}, {date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1516 弄',zip: 200333,id: '333'}]}}
}
</script>
初版–01
相关文章:
vue element el-upload附件上传、在线预览、下载当前预览文件
上传 在线预览(iframe): payload: response: 全部代码: <template><div><el-table :data"tableData" border style"width: 100%"><el-table-column prop"d…...
设计模式九:组合模式(Composite Pattern)
组合模式是一种结构型设计模式,它允许我们将对象组合成树形结构来表示“整体-部分”层次关系。组合模式使得用户可以以相同的方式处理单个对象和组合对象。 在组合模式中,有两种主要类型的对象:叶子对象和组合对象。叶子对象代表树结构中的最…...
【COlor传感器】通过扰动调制光传感实现智能光传输的占用分布估计研究(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
微服务系列<3>---微服务的调用组件 rpc 远程调用
什么是rpc调用,让我们调用远程方法就像调用本地方法一样 这就属于rpc调用 rpc是针对于本地来说的 调用远程方法根调用本地方法一样 如果能达到这种效果 就是rpc调用如果达到一种效果 调用远程和调用本地一样 他就是一种rpc框架2个微服务 之间发的调用 我们之前通过ribbon的方式…...
P1558 色板游戏
题目链接 题目要求实现区间覆盖修改以及区间数量查询,不难想到为线段树,而需要维护什么值来得到不同数的数量很难想,但是我们注意到颜色的数量最多只有30种,所以对于每一种颜色在一个区间中是否存在,我们可以使用线段树…...
大数据概论
1、大数据概念 大数据(Big Data): 指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产 大数据主要解决,海量数据的采集、存储和分…...
数据库访问中间件--springdata-jpa的基本使用
二、单表SQL操作-使用关键字拼凑方法 回顾 public interface UserRepository extends JpaRepository<User,Integer> {User findByUsernameLike(String username); }GetMapping("/user/username/{username}")public Object findUserByUsername(PathVariable S…...
c++游戏制作指南(二):制作一个炫酷的启动界面(c++绘图)
🍿*★,*:.☆( ̄▽ ̄)/$:*.★* 🍿 🍟欢迎来到静渊隐者的csdn博文,本文是c游戏制作指南的一部🍟 🍕更多文章请点击下方链接🍕 🍨 c游戏制作指南dz…...
spring.config.location 手动指定配置文件文件
–spring.config.locationD:\javaproject\bangsun\ds-admin\ds-oper-mgr\src\main\resources\application.yml...
【uniapp 使用ECharts】
Uniapp可以使用ECharts进行数据可视化,需要按照以下步骤进行操作: 1. 安装ECharts插件 可以使用npm安装echarts插件,命令如下: npm install echarts --save2. 引入ECharts插件 在需要使用ECharts的页面中引入ECharts插件&…...
数据结构--线性表2-2
目录 一、线性表例题: 二、分配动态内存: 1.动态创建一个空顺序表的算法: 2.动态顺序表的插入算法: 3.动态顺序表的删除 三、线性表的链式表示和实现 例题1:创建链表并插入26个字母 例题2:在链表中取…...
利用openTCS实现车辆调度系统(一)系统介绍
系统介绍 openTCS简介 官方的回答: openTCS(开放式运输控制系统的缩写)是一种免费的控制系统软件,用于协调自动导引车(AGV)和移动机器人车队,例如在生产工厂中。 通常应该可以控制任何具有通信…...
销存管理系统ssm进销存仓库销售java jsp源代码mysql
本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 销存管理系统ssm 系统有1权限:管理员 二…...
【Axure教程】移动端二级滑动选择器
今天教大家制作移动端二级滑动选择器的原型模板,该原型已全国一二级省市选择器为案例,因为该原型用中继器做的,所以制作完成之后使用也很方便,只需修改中继器表格里的内容即可 一、效果展示 1. 拖动选择 2. 快捷选择 【原型预览…...
PHP操作solr
1,php下载solr(索尔)扩展,phpinfo需要支持solr扩展. 2,安装 Solr。Solr 要求您的系统上有 Java。java –version,Java 的版本大于 1.6 3,下载solr,并安装 D:\solr。 开启solr命令:solr start 关闭solr命令:…...
leetcode 46. Permutations(排列)
返回数组nums中数字的所有可能的排列组合。 思路: 排列组合这种一般会想到DFS。 这个排列中每个数字只能用一次, 可用如下DFS流程 stack.push(num); dfs(nums, num); stack.pop();退出条件: 当stack的size和nums数组一样时,说…...
5、二叉树
二叉树遍历 递归序 public static void f(Node head) {if (head == null) {return;}f(head.left);f(head.right); }前中后遍历_递归 public static void preOrderRecur(Node head) {if (head == null) {return;}System.out.print(head.value + " ");preOrderRecur…...
Doris比MySQL快的原因
简介 在数据存储和数据分析领域,MySQL和Doris是比较流行的数据库管理系统的代表。 在如今的大数据时代,数据量和数据分析的速度是很重要的。 在数据分析和数据处理中,Doris比MySQL快,这个问题一直是许多人关心的问题。 Doris的数…...
Prometheus + Grafana安装
Prometheus是一款基于时序数据库的开源监控告警系统,非常适合Kubernetes集群的监控。Prometheus的基本原理是通过HTTP协议周期性抓取被监控组件的状态,任意组件只要提供对应的HTTP接口就可以接入监控。不需要任何SDK或者其他的集成过程。这样做非常适合做…...
二十三种设计模式第二十一篇--解释器模式
解释器模式(Interpreter Pattern)是一种行为设计模式,它用于定义一种语言的语法结构和解释器,使得可以解释并执行特定的语法规则。该模式可以将复杂的语言表达式分解为更小的语法单元,并定义其解释过程。 解释器模式的…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生,小白用户,想学习知识的 有点基础,想要通过项…...
