7-上传下载

上传下载

首先创建一张上传文件的表,例如:

drop table if exists sys_file_info;
create table sys_file_info (file_id           int(11)          not null auto_increment       comment '文件id',file_name         varchar(50)      default ''                    comment '文件名称',file_path         varchar(255)     default ''                    comment '文件路径',primary key (file_id)
) engine=innodb auto_increment=1 default charset=utf8 comment = '文件信息表';

1.上传实现流程

1、el-input修改成el-upload

<el-uploadref="upload":limit="1"accept=".jpg, .png":action="upload.url":headers="upload.headers":file-list="upload.fileList":on-progress="handleFileUploadProgress":on-success="handleFileSuccess":auto-upload="false"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading" @click="submitUpload">上传到服务器</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>

2、引入获取token

import { getToken } from "@/utils/auth";

3、data中添加属性

// 上传参数
upload: {// 是否禁用上传isUploading: false,// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: process.env.VUE_APP_BASE_API + "/common/upload",// 上传的文件列表fileList: []
},

4、新增和修改操作对应处理fileList参数

handleAdd() {...this.upload.fileList = [];
}handleUpdate(row) {...this.upload.fileList = [{ name: this.form.fileName, url: this.form.filePath }];
}

5、添加对应事件

// 文件提交处理
submitUpload() {this.$refs.upload.submit();
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {this.upload.isUploading = false;this.form.filePath = response.url;this.msgSuccess(response.msg);
}

注意:此种方式使用的是前端技术实现了文件的上传操作,修改文件时会有问题。

列表显示:

      <el-table-column label="头像" align="center" prop="filePath"><template slot-scope="scope"><el-imagestyle="width: 100px; height: 100px":src="scope.row.filePath"></el-image></template></el-table-column>

2.下载实现流程

1、添加对应按钮和事件

<el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleDownload(scope.row)"
>下载</el-button>

2、实现文件下载

// 文件下载处理
handleDownload(row) {var name = row.fileName;var url = row.filePath;var suffix = url.substring(url.lastIndexOf("."), url.length);const a = document.createElement('a')a.setAttribute('download', name + suffix)a.setAttribute('target', '_blank')a.setAttribute('href', url)a.click()
}

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

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

相关文章

动态分析C语言代码生成函数调用关系的利器——gprof

大纲 准备工作下载libevent代码安装编译依赖编译libevent 收集运行数据编译插入检测代码的可执行程序收集数据 数据转换环境准备转换为dot 转换为图片环境准备转换图片 参考代码参考资料 gprof是一个C语言程序性能分析工具。在编译期间&#xff0c;我们给编译指令增加-pg选项&a…

第 8 章:Linux中使用时钟、计时器和信号

在本章中&#xff0c;我们将开始探索Linux环境中可用的各种计时器。随后&#xff0c;我们将深入了解时钟的重要性&#xff0c;并探讨UNIX时间的概念。接下来&#xff0c;我们将揭示在Linux中使用POSIX准确测量时间间隔的方法。之后&#xff0c;我们将进入std::chrono的领域&…

20240130收获

el-table-column的formatter属性的回调函数会传给我们row的数据&#xff0c;即直接把整行的数据给到我们了&#xff0c;而不是给我们该列的数据。所以我们应该通过{xx}解构的方式来取我们要的属性。解构的时候&#xff0c;不要写错了&#xff0c;比如obj.name&#xff0c;我们想…

创业7年复盘,中美企业服务市场差异浅析

2024 年伊始&#xff0c;Kyligence 联合创始人兼 CEO 韩卿在公司内部的飞书订阅号发表了多篇 Rethink Data & Analytics 的内部信&#xff0c;分享了对数据与分析行业的一些战略思考&#xff0c;尤其是 AI 带来的各种变化和革命&#xff0c;是如何深刻地影响这个行业乃至整…

一篇文带你使用js实现拖拽排序

先介绍一下html5的drag属性,拖放&#xff08;Drag 和 drop&#xff09;是 HTML5 标准的组成部分。想要启用drag&#xff0c;只要给元素加上draggable"true"就行了&#xff08;Safari 5.1.2除外&#xff09;。   实际效果&#xff1a; 拖动事件(了解事件详情)   事…

Node.js 模块化

一、介绍 1.1 什么是模块化与模块 ? 将一个复杂的程序文件依据一定规则&#xff08;规范&#xff09;拆分成多个文件的过程称之为 模块化 其中拆分出的 每个文件就是一个模块 &#xff0c;模块的内部数据是私有的&#xff0c;不过模块可以暴露内部数据以便其他 模块使用 1…

股票市场

&#xff08;一&#xff09;股票市场 顾名思义&#xff0c;就是买卖股票的场所。就是为了撮合想发展但缺钱的企业与有钱但想投资的投资者。 股票市场按照交易场所&#xff0c;可分为场内市场和场外市场&#xff1a; 场内市场是指证券交易所&#xff0c; 场外市场就是证券交易…

【Linux】Linux环境基础开发工具使用

上篇博客我们学习了Linux权限相关知识&#xff0c;那么这节课我们来学习一下Linux环境基础开发工具使用吧~&#xff0c;主要包括yum、vim、gcc/g的使用&#xff0c;以及Linux项目自动化构建工具。 目录 Linux软件包管理器--yum yum是什么 yum相关操作 yum本地配置 Linux编…

蓝桥杯-循环节长度

两个整数做除法&#xff0c;有时会产生循环小数&#xff0c;其循环部分称为: 循环节。比如&#xff0c;11/136>0.8461553846153..... 其循环节为[846153] 共有 6 位。下面的方法&#xff0c;可以求出循环节的长度。请仔细阅读代码&#xff0c;并填写划线部分缺少的代码。 注…

redis—Zset有序集合

目录 前言 1.常见命令 2.使用场景 3.渐进式遍历 4.数据库管理 前言 有序集合相对于字符串、列表、哈希、集合来说会有一-些陌生。它保留了集合不能有重复成员的 特点&#xff0c;但与集合不同的是&#xff0c;有序集合中的每个元素都有-个唯- -的浮 点类型的分数(score) …

RabbitMQ安装及使用讲解

RabbitMQ 是一个开源的消息队列系统&#xff0c;它能够让你轻松地构建分布式、可扩展和可靠的应用程序。下面是 RabbitMQ 的安装及使用讲解&#xff1a; 安装 RabbitMQ 首先&#xff0c;你需要从 RabbitMQ 的官网上下载并安装 RabbitMQ。具体的安装方法可以参考官方文档。启动…

20240126收获

el-table比较常见的需要跳转column的场景&#xff0c;目前遇到三种&#xff0c;一种是前面列变成序号&#xff0c;用的是typeindex和&#xff1a;index来设置索引&#xff0c;第二种是变成多选&#xff0c;用的是typeselect和在table上加上select-change事件&#xff0c;第三种…

故障脚本的重要作用:预防、诊断与恢复

故障脚本是在信息技术和计算机领域中广泛使用的一种自动化工具&#xff0c;它们的主要目的是预测、诊断和修复系统或软件中的故障。这些脚本在现代技术环境中扮演着至关重要的角色&#xff0c;本文将介绍故障脚本的主要作用。 一、预防性作用 监控和预警 故障脚本可以用于监控系…

web应用课——(第一讲:html基础标签)

目录 一、html文件结构 二、文本标签 三、图片 四、音频和视频 五、超链接 六、表单 七、列表 八、表格 九、语义标签 十、特殊符号 一、html文件结构 <html>标签&#xff1a;表示一个 HTML 文档的根&#xff08;顶级元素&#xff09;&#xff0c;所以它也被…

vue3-hand-mobile

当我写完手势移动事件后&#xff0c;我又通过svg的方法添加了一段文字和polygon。当我在这个蓝色的polygon上滑动手势的时候&#xff0c;会报错。 可能这个bug只是我个人的代码导致的。但是我觉得vue3-hand-mobile插件的这一段代码写的有问题。 我通过circular-json库修复了这…

在Windows中如何格式化硬盘?这里提供了详细的步骤

格式化硬盘意味着擦除硬盘上的任何信息和设置文件系统,以便操作系统可以从硬盘读取数据并将数据写入硬盘。如果你计划在Windows中使用硬盘,则需要格式化硬盘。 如何在Windows中格式化硬盘 按照以下简单步骤在Windows 11,Windows 10,Windows 8,Windows 7,Windows Vista或…

3d模型上的材质怎么删除---模大狮模型网

在大多数3D软件中&#xff0c;可以通过以下步骤来删除3D模型上的材质&#xff1a; 选择要删除材质的模型&#xff1a;首先&#xff0c;从场景中选择包含目标材质的模型。可以使用选择工具或按名称查找模型。 进入编辑模式&#xff1a;将模型切换到编辑模式。这通常需要选择相应…

力扣:102. 二叉树的层序遍历

广度优先搜索解题&#xff1a; 1.先定义接受的大集合数组 List<List<Integer>>&#xff0c;在创建一个队列来模拟树的进队列操作。 2.这道题的层序遍历重点在于每一层的全部结点组成一个数组来进行存储&#xff0c;所以要如何辨别每一层的节点是解题关键。我们可…

知识点积累系列(九)开发规范篇【持续更新】

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 知识点积累 系列文章的第九篇&#xff0c;记录日常学习中遇到的 开发规范 相关的知识点 1.OpenAPI是什么&#xff0c;和swagger有什么区别 OpenAPI&#xff1a;其实就是用于描述 应用API信息 的通用规范&#…

SpringBoot整合ZXing生成和解析二维码详解含源码(值得珍藏)

点击下载《SpringBoot整合ZXing生成和解析二维码详解含源码&#xff08;值得珍藏&#xff09;》 1. 前言 在当今的数字化时代&#xff0c;二维码已成为信息传递的普遍手段&#xff0c;其应用范围极为广泛&#xff0c;不仅出现在产品标签、活动宣传单上&#xff0c;还渗透到电…