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;
}

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

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

相关文章

Shell编程规范与变量-01

一、Shell脚本概述 在一些复杂的 Linux 维护工作中&#xff0c;大量重复性的输入和交互操作不仅费时费力&#xff0c;而且容易出错&#xff0c;而编写一个恰到好处的 Shell 脚本程序&#xff0c;可以批量处理、自动化地完成一系列维护任务&#xff0c;大大减轻管理员的负担。 1…

mongosh 和mongo 命令行连接MongoDB

Mongoshell MongoDB的Shell工具mongosh是一个全功能的JavaScript和Node.js的14.x REPL与MongoDB的部署交互环境。我们通过它可以直接对数据库进行查询和操作。这个工具是需要在安装玩MongoDB后单独安装的。 与传统的mongo方式连接MongoDB更加丰富。 官网 https://www.mongodb.…

Java 面试题:如何保证集合是线程安全的? ConcurrentHashMap 如何实现高效地线程安全?

在多线程编程中&#xff0c;保证集合的线程安全是一个常见而又重要的问题。线程安全意味着多个线程可以同时访问集合而不会导致数据不一致或程序崩溃。在 Java 中&#xff0c;确保集合线程安全的方法有多种&#xff0c;包括使用同步包装类、锁机制以及并发集合类。 最简单的方法…

编程语言中的作用域

编程语言中的作用域 作用域&#xff08;Scope&#xff09;是计算机程序设计中的一个核心概念&#xff0c;它主要用于规定程序中变量、函数和对象的可见范围和有效期限。换句话说&#xff0c;作用域决定了在代码的哪些部分可以访问特定的变量、函数或对象。 通过作用域的使用&…

网络编程(八)广播、组播

一、广播 &#xff08;一&#xff09;概念 前面介绍的数据包发送方式只有一个接受方&#xff0c;称为单播 如果同时发给局域网中的所有主机&#xff0c;称为广播 如果同时发给局域网中的部分主机&#xff0c;称为组播 注意&#xff1a; 只有用户数据报(使用UDP协议)套接字才…

AI音乐大模型时代:版权归属与创意产业的新生长点

AI在创造还是毁掉音乐&#xff1f; 简介&#xff1a;最近一个月&#xff0c;轮番上线的音乐大模型&#xff0c;一举将素人生产音乐的门槛降到了最低&#xff0c;并掀起了音乐圈会不会被AI彻底颠覆的讨论。短暂的兴奋后&#xff0c;AI产品的版权归属于谁&#xff0c;创意产业要…

JWT生成令牌

实现步骤 引入JWT包 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.12.3</version> </dependency>定义令牌类型枚举 package com.angel.ocean.token.constant;public enum Toke…

go语言进阶实战学习(逐行注释)(1):两协程并发交替打印数字和字母

要求&#xff1a; 并发两协程交替打印数字和字母。一个协程打印数字&#xff0c;一个协程打印字母。 输出&#xff1a; 12AB34CD56EF78GH910IJ1112KL1314MN1516OP1718QR1920ST2122UV2324WX2526YZ2728 思路&#xff1a; 两个 channel 控制两个协程进行交替打印。sync.WaitG…

PyScada(三)后端应用

PyScada 的后端应用 使用后端 要使用后端&#xff0c;请在浏览器中打开http://127.0.0.1 &#xff08;将 127.0.0.1 替换为 PyScada 服务器的 IP 或主机名&#xff09;&#xff0c;然后使用安装过程 中定义的管理员帐户登录 &#xff08;TODO 链接到创建超级用户文档&#xf…

Java基础的重点知识-01

文章目录 开发前言Java语言开发环境入门程序说明常量变量和数据类型数据类型转换运算符方法解析 开发前言 常用DOS命令 Java语言的初学者&#xff0c;学习一些DOS命令&#xff0c;会非常有帮助。DOS是一个早期的操作系统&#xff0c;现在已经被Windows系统取代&#xff0c;对于…

STL——函数对象,谓词

一、函数对象 1.函数对象概念 概念&#xff1a; 重载函数调用操作符的类&#xff0c;其对象常称为函数对象。 函数对象使用重载的()时&#xff0c;行为类似函数调用&#xff0c;也叫仿函数。 本质&#xff1a; 函数对象(仿函数)是一个类&#xff0c;不是一个函数。 2.函数对象…

Vue2动态代理无须重启项目解决方案

1、痛点 如果我们需要使用不同的环境地址的时候&#xff0c;就需要使用命令或者手动修改vue.config.js中配置来重新启动项目。当项目项目越来越大的时候&#xff0c;我们需要很长的时间来启动项目&#xff0c;如此反复&#xff0c;极大影响我们开发进度。 2、寻求解决方案 ● v…

RAG和agent框架选型

langChain llama index autoGen metaGPT

spring使用@PostConstruct踩得坑

情况说明&#xff1a; 在一个抽象类中使用PostConstruct注解方法init用于初始化操作。然后每个实现类在初始化时都会调用PostConstruct注解的init方法执行初始化操作。如下代码&#xff1a; public abstract class AbstractClass {/*** 存放各实例.*/public static final Map&…

git分支及提交规范【AI 文心一言】

Git代码提交规范和分支命名规范是团队协作中非常重要的部分&#xff0c;它们有助于保持代码库的清晰、一致和易于管理。以下是对Git代码提交规范和采用“/”分割的分支命名规范的总结&#xff1a; Git代码提交规范 提交类型&#xff1a; feat: 增加新功能 fix: 修复问题BUG d…

Windows安装多个jdk环境(jdk6+jdk8+jdk17)保姆级

Windows安装多个jdk环境&#xff08;jdk6jdk8jdk17&#xff09;保姆级 背景&#xff1a;新机安装开发环境发现需要找很多文章&#xff0c;&#xff0c;&#xff0c;&#xff0c;这里一篇文章安装所有环境 文章目录 Windows安装多个jdk环境&#xff08;jdk6jdk8jdk17&#xff09…

经典游戏案例:植物大战僵尸

学习目标&#xff1a;植物大战僵尸核心玩法实现 游戏画面 项目结构目录 部分核心代码 using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.SceneManagement; using Random UnityEngine.Random;public enum Z…

Django 条件判断模板标签

1&#xff0c;条件判断模板标签 1. 2 {% if %} 标签 {% if variable %}<!-- 如果 variable 为 True&#xff0c;则渲染此处内容 --> {% endif %} 1. 3 {% if %} 与 {% else %} 组合 {% if variable %}<!-- 如果 variable 为 True&#xff0c;则渲染此处内容 -->…

【笔记】git源

报错信息 # git clone https://github.com/paddlepaddle/PaddleCustomDevice Cloning into PaddleCustomDevice... error: RPC failed; curl 16 Error in the HTTP2 framing layer fatal: expected flush after ref listing可选源 由于&#x1f512;&#x1f5fa;&#xff0c…

BFS:解决最短路问题

文章目录 什么是最短路问题&#xff1f;1.迷宫中离入口最近的出口2.最小基因变化3.单词接龙4.为高尔夫比赛砍树总结 什么是最短路问题&#xff1f; 最短路问题是图论中的经典问题&#xff0c;旨在寻找图中两个节点之间的最短路径。常见的最短路算法有多种&#xff0c;这次我们…