el-upload 组件上传文件(查询,上传,删除,下载功能)

2024-06-23 00:28

本文主要是介绍el-upload 组件上传文件(查询,上传,删除,下载功能),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.html

el-upload中的属性:

 <el-upload
        ref="upload"  
        class="upload-demo"  // element-ui自带的样式
        :headers="headerOdj" // 文件上传的头,带token(重要,不然传输大文件会断掉)
        :action="adminUrl" // 上传的服务器地址
        :before-upload="beforeFileUpload" // 文件上传前(判断文件类型,大小)
        :on-success="successFileUpload" // 文件上传成功(上传接口写这,回显的数据处理)
        :on-remove="handleRemove" // 文件移除时候(删除文件接口写这)
        :on-preview="handleFile" // 点击文件时候(文件点击下载)
        :file-list="fileList" // 页面文件回显的list
        drag // 支持拖拽上传
      >

    <!-- pc文件上传对话框 --><el-dialogtitle="文件上传":visible.sync="pcUpload"width="400px"append-to-body:before-close="pcUploadClose"><el-uploadref="upload" class="upload-demo":headers="headerOdj":action="adminUrl":before-upload="beforeFileUpload":on-success="successFileUpload":on-remove="handleRemove":on-preview="handleFile":file-list="fileList"drag><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div></el-upload><div slot="footer" class="dialog-footer"><el-button @click="pcUploadClose">取 消</el-button></div></el-dialog>

2.接口引入

import {getNoticeinfo, // 获取公告详情UploadFile, // 上传文件QueryUploadFile, // 查询文件
} from "@/api/system/noticeinfo";
import { delNoticeinfofile } from "@/api/system/noticeinfofile"; // 删除文件接口
import { getToken } from "@/utils/auth"; // ruoyi中获取token封装好的

3.data中的数据

 adminUrl: this.$global.fileUrl,  // this.$global.fileUrl是自己定义的全局服务器地址,直接写服务器地址也行

 headerOdj  中的Authorization:token值   ruoyi有封装好的,一般在created中自己先获取

data() {return {pcUpload: false, // pc端上传框弹窗显示// 页面回显的文件列表,需要有以下格式数据类型fileList: [// {//   name: "food.jpeg",//   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",// },// {//   name: "food2.jpeg",//   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",// },],adminUrl: this.$global.fileUrl, //图片上传后台地址headerOdj: { Authorization: getToken() }, // 文件上传带的头,需要token,不然大文件上传会断};},

4.methods

/* pc端文件上传时候------------------------------------- */// 上传文件前beforeFileUpload(file) {// console.log("上传前file====>", file);const fileName = file.name;for (let i = 0; i < this.fileList.length; i++) {// 如果上传文件名称 已上传的文件名存在提示if (fileName == this.fileList[i].name) {this.$message.error("文件名已存在,请改名或删除已有文件");return false;}}const isLt50M = file.size / 1024 / 1024 < 50;if (!isLt50M) {this.$message.error("上传头像图片大小不能超过 50MB!");}return isLt50M;},// 文件上传成功时候successFileUpload(response, file, fileList) {if (file != null) {// 接口上传 需要formData 文件类型let formData = new FormData();formData.append("file", file.raw);formData.append("noticeId", this.id);formData.append("userId", 1);UploadFile(formData).then((res) => {// console.log("####", res);if (res.code == 200) {// 把上传返回的信息添加到fileList文件const obj = {};obj.id = res.data.id;obj.name = res.data.zbFileName;obj.url = this.$global.fileUrl + res.data.zbFileUrl;this.fileList.push(obj);console.log("上传成功后的fileList", this.fileList);this.$modal.msgSuccess("上传成功");}});}},// 文件上传--移除handleRemove(file, fileList) {// console.log("删除file===>", file);const name = file.name;const id = file.id;delNoticeinfofile(id).then((res) => {// console.log(res);if (res.code == 200) {this.$modal.msgSuccess("删除成功");}});},// (下载文件)点击文件列表中已上传的文件时的钩子handleFile(file) {// console.log("点击文件=>", file);const url = file.url;const link = document.createElement("a");link.href = url;link.download = file.name; // 可选:设置下载文件的名称link.target = "_blank"; // 可选:设置下载文件的名称document.body.appendChild(link);link.click();document.body.removeChild(link);},/* pc端文件上传处理------------------------------------- *//* pc端上传按钮 */pcUploadbtn() {// 查询文件const formData = new FormData();formData.append("noticeId", this.id);formData.append("userId", 1);QueryUploadFile(formData).then((res) => {// console.log("查询的文件===>", res);if (res.code == 200) {if (res.data.length == 0) {// 文件为空的情况} else {// 文件不为空的的时候处理for (let i = 0; i < res.data.length; i++) {const obj = {};obj.id = res.data[i].id;obj.name = res.data[i].zbFileName;obj.url = this.$global.fileUrl + res.data[i].zbFileUrl;this.fileList.push(obj);}console.log("###处理后的文件", this.fileList);}}});this.pcUpload = true;},/* 上传窗口关闭 */pcUploadClose() {this.pcUpload = false;this.fileList = []; // 弹窗关闭时,文件置空,不然显示已有文件的时候会动画会跳动},

css样式

/* 控制整个上传文件列表的高度和滚动条 */
::v-deep .el-upload-list {height: 200px; /* 设置你想要的高度 */overflow-y: auto; /* 添加垂直滚动条 */
}
/* 去掉文件跳动动画 */
::v-deep .el-upload-list__item {transition: none !important;
}

这篇关于el-upload 组件上传文件(查询,上传,删除,下载功能)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1085823

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中,我们经常会遇到这样的情况:一不小心,桌面上的某个重要文件被删除了。这时,大多数人可能会感到惊慌失措,不知所措。 其实,不必过于担心,因为有很多方法可以帮助我们找回被删除的桌面文件。下面,就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件,并且还没有进行其他操作,那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

常用的jdk下载地址

jdk下载地址 安装方式可以看之前的博客: mac安装jdk oracle 版本:https://www.oracle.com/java/technologies/downloads/ Eclipse Temurin版本:https://adoptium.net/zh-CN/temurin/releases/ 阿里版本: github:https://github.com/

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF

JavaFX应用更新检测功能(在线自动更新方案)

JavaFX开发的桌面应用属于C端,一般来说需要版本检测和自动更新功能,这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤: 读取本地应用版本拉取远程版本并比较两个版本如果需要升级,那么拉取更新历史弹出升级控制窗口用户选择升级时,拉取升级包解压,重启应用用户选择忽略时,本地版本标志为忽略版本用户选择取消时,隐藏升级控制窗口 2.

2. 下载rknn-toolkit2项目

官网链接: https://github.com/airockchip/rknn-toolkit2 安装好git:[[1. Git的安装]] 下载项目: git clone https://github.com/airockchip/rknn-toolkit2.git 或者直接去github下载压缩文件,解压即可。