当前位置: 首页 > news >正文

el-button增加下载功能

在这里插入图片描述

vue3和element-plus

<el-uploadv-model:file-list="fileList"action="/api/upload"multiple:limit="1":headers="headers"
><el-button type="primary">选择文件</el-button><template #file="{ file }"><div style="display: flex; justify-content: space-between;align-items: center;"><a target="_blank" :href="file.url">{{ file.name }}</a><el-icon style="cursor: pointer;" @click="removeFile(file, fileList)"><CloseBold /></el-icon></div></template>
</el-upload>

方法

const userInfo = JSON.parse(localStorage.getItem('userInfo'))
const headers = {Authorization: 'Bearer ' + userInfo.accessToken
}
const fileList = ref([])// 点×的
const removeFile = (file, list) => {removeValue.value.push(file.id)for (let i = 0; i < list.length; i++) {if (list[i].name === file.name && list[i].url === file.url) {list.splice(i, 1)}}
}
http://www.lryc.cn/news/103764.html

相关文章:

  • prometheus和cAdvisor组合
  • 计算机网络(2) --- 网络套接字UDP
  • Idea 结合docker-compose 发布项目
  • django
  • c++游戏框架
  • v-model绑定checkbox无法动态更新视图
  • 原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
  • 微信小程序配置上传多个u-upload上传
  • python使用win32com库实现对Excel的操作
  • <Maven>项目依赖导入Maven本地仓库命令
  • 爬虫006_python中的运算符_算术运算符_赋值运算符_复合赋值运算符_比较运算符_逻辑运算符_逻辑运算符性能提升---python工作笔记024
  • CPU Architecture Methodologies
  • Spring的@Scheduled
  • IP隧道技术原理
  • Docker私有仓库
  • LLM微调 | Prefix-Tuning, Prompt-Tuning, P-tuning, P-tuning-v2
  • Ansible 的脚本 --- playbook 剧本
  • CSP-J模拟赛 / 买文具
  • leecode算法--每日一题1
  • LViT:语言与视觉Transformer在医学图像分割
  • 蓝桥杯上岸每日N题 第五期(山)!!!
  • IDEA Writing classes... 比较慢
  • opencv中轮廓相关属性
  • Leetcode 144. 二叉树的前序遍历
  • 医学影像PACS系统源码:多功能服务器和阅片系统
  • php 生成连续递增的Excel列索引 可以控制多少列
  • Openstack等私有云
  • MySQL 8.0详细安装配置教程
  • pytest 入门
  • 分布式缓存数据一致性-解决方案