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

elementui-plus+ts+axios使用el-upload组件自定义上传

1.前言:

在这里插入图片描述

使用element ui有很多便捷之处,但是由于是封装的组件和自己写还是有些许的不一样,这里主要解决几个问题。

1. 如何获取子组件实例
2. 如何自定义上传方法

在这里插入图片描述

2.两个问题:

  1. ⛺️ 获取子组件实例

实际上vue一般通过ref获取子组件实例。
不过每个版本都有区别,甚至ts和js版本也有细微区别。

<el-dialogtitle="上传"v-model="dialogVisible"width="30%":before-close="handleClose"><el-uploadclass="upload-demo"drag:before-upload="beforeUpload"ref="img":http-request="toUploadImg":limit = 1multiple = falseelement-loading-text="正在上传"><el-icon :size="20"><Upload /></el-icon><div class="el-upload__text">将图片拖到此处,或<em>点击上传</em></div><div class="el-upload__tip" slot="tip"></div></el-upload><span slot="footer" class="dialog-footer"></span></el-dialog>
const img = ref<UploadInstance>();
const handleClose = () => {img.value?.clearFiles();dialogVisible.value=false;
}
  1. 我们这里需要执行elementui-plus的清除文件的方法,在vue3中是需要通过声明一个相同变量的ref获取实例的。这是vue3和vue2的区别

  2. 而在ts中需要给这个组件一个上传实例的泛型UploadInstance,这个类型是elementui提供的,当然不加也可以,但是费劲很多,因为ts检查比较严格,因为ts不知道你的这个组件是什么,语法提示就没有了。

2 ⛺️ 自定义上传

在较为大型的项目中,这种到处手写路径的方法无疑是增加了耦合,增加了代码复杂度。
最好统一管理api请求接口模块。并且上传数据也不是自己能够决定的,
在这里插入图片描述
使用这个api可以覆盖文件的默认上传方法。这里我们声明使用http-request声明了toUploadImg方法,自己实现上传文件的方法,并且使用formdata上传额外的参数。

<el-dialog title="上传"v-model="dialogVisible"width="30%":before-close="handleClose"><el-uploadclass="upload-demo"drag:before-upload="beforeUpload"ref="img":http-request="toUploadImg":limit = 1multiple = falseelement-loading-text="正在上传"><el-icon :size="20"><Upload /></el-icon><div class="el-upload__text">将图片拖到此处,或<em>点击上传</em></div><div class="el-upload__tip" slot="tip"></div></el-upload><span slot="footer" class="dialog-footer"></span></el-dialog>
const toUploadImg = (param: UploadRequestOptions) => {debuggerconst file = param.file;const currentPath = "/" + path.value.join("/");const formData = new FormData();formData.append('file', file); // 这里可以根据需要设置其他表单字段formData.append('path',currentPath);uploadImg(formData).then((res) => {if(res.statusCode === 200){ElMessage.success('上传成功');}})return formData;
}

我们注意到这个api提供的参数类型是UploadRequestOptions,包含众多属性,我这里之获取了文件名,可以根据自己需要获取修改。
在这里插入图片描述

相关文章:

elementui-plus+ts+axios使用el-upload组件自定义上传

1.前言&#xff1a; 使用element ui有很多便捷之处&#xff0c;但是由于是封装的组件和自己写还是有些许的不一样&#xff0c;这里主要解决几个问题。 1. 如何获取子组件实例 2. 如何自定义上传方法 2.两个问题&#xff1a; ⛺️ 获取子组件实例 实际上vue一般通过ref获取子组…...

【STM32单片机】u8g2智能风扇设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用STM32F103C8T6单片机控制器&#xff0c;使用按键、IIC OLED模块、DS18B20温度传感器、直流电机、红外遥控等。 主要功能&#xff1a; 初始化后进入温度显示界面&#xff0c;系统初始状态为手动…...

Java中的IO流的缓冲流

不爱生姜不吃醋⭐️ 如果本文有什么错误的话欢迎在评论区中指正 与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 &#x1f334;IO流体系结构&#x1f334;缓冲流1.提高效率的原理2.缓冲流的类型3.字符缓冲流两个特有方法 &#x1f334;总结 &#x1f334;IO流体系…...

7、SpringBoot_高级配置

一、配置高级 1.临时属性设置 1.1引出问题 如果目标电脑上8080端口已经使用&#xff0c;再次使用该端口会出现端口占用问题 解决方式 重新更换配置文件修改端口打包通过临时属性配置新端口更换配置文件 1.2添加临时属性配置 通过临时属性修改8080端口 java -jar 项目.jar…...

cocos2dx查看版本号的方法

打开文件&#xff1a;项目根目录\frameworks\cocos2d-x\docs\RELEASE_NOTES.md 知道引擎版本号的意义&#xff1a; 1.面试中经常被问到(面试官想知道你会不会查版本号&#xff0c;你会查也不一定会去看&#xff0c;如果你去看了说明你是一个有心人&#xff0c;或者想深入研究下…...

某高校的毕设

最近通过某个平台接的单子&#xff0c;最后Kali做的测试没有公开可以私聊给教程。 下面是规划与配置 1.vlan方面&#xff1a;推荐一个vlan下的所有主机为一个子网网段 连接电脑和http客户端的接口配置为access接口 交换机与交换机或路由器连接的接口配置为trunk接口---也可以…...

利用uvicorn、Starlette和pipeline将一个训练好的大模型发布成一个web服务

技术名词&#xff1a; 1、Starlette&#xff1a; 它是一个轻量级、高度可用性和可扩展性的Web框架&#xff0c;它专门为异步应用程序设计。 Starlette基于Python 3.6的异步/协程语法&#xff0c;具有快速响应性能和低延迟。你可以将它理解为Java的Spring。 安装&#xff1a;…...

贝赛尔曲线 - Vue3实现加入购物车抛物线效果组件

贝赛尔曲线 - Vue3实现加入购物车抛物线效果组件&#xff08;可连续多个动画&#xff0c;动态回收DOM&#xff09; 前言 在前几天的一次迭代中&#xff0c;我遇到了这么一个需求&#xff0c;模仿支付宝首页应用中心的编辑功能&#xff0c;支持编辑首页展示的应用&#xff0c;…...

AddressSanitizer failed to allocate 0xdfff0001000 (15392894357504) bytes解决方法

打开一个编译选项启用ASan的程序&#xff1a; AddressSanitizer failed to allocate 0xdfff0001000 (15392894357504) bytes然后程序启动失败。 原因&#xff1a; [cfe-dev] Question about Clang/LLVM addresssanitizer /proc/sys/vm/overcommit_memory是一个用于控制内存…...

Fortinet 2023上半年全球威胁态势研究报告:勒索软件检测成下降趋势,针对性攻击持续升温

近日&#xff0c;专注于推动网络与安全融合的全球网络安全领导者Fortinet&#xff08;NASDAQ&#xff1a;FTNT&#xff09;&#xff0c;发布《2023上半年全球威胁态势研究报告》。报告显示&#xff0c;2023 年上半年勒索软件检出数量继续下降、高级持续性威胁&#xff08;APT&a…...

MySQL ——多表连接查询

一、&#xff08;左、右和全&#xff09;连接概念 内连接&#xff1a; 假设A和B表进行连接&#xff0c;使用内连接的话&#xff0c;凡是A表和B表能够匹配上的记录查询出来。A和B两张表没有主付之分&#xff0c;两张表是平等的。 关键字&#xff1a;inner join on 语句&#xf…...

前沿技术 --> 待定

一、可会可不会 1.1如何优雅的编写技术文档 网址&#xff1a; 如何优雅的编写技术文档&#xff1f; - YouTube...

Linux定时python脚本(crontab版本)

1.0 使用Linux系统命令 crontab 自带的定时命令2.0 crontab的使用 2.1 添加定时任务 crontab -e2.2 查看定时任务的完成情况 2.2.1 查看日志 tail -f /var/log/syslog | grep CRON 2.2.2 任务执行情况 grep CRON /var/log/syslog 2.3 定时任务的规则 每隔一分钟执行一次…...

修改 Ubuntu .cache 和 pip cache 默认路径

修改 Ubuntu .cache 和 pip cache 默认路径 非常不建议修改 .cache 默认路径&#xff0c;除非你知道修改后的影响。 执行下面命令进行修改&#xff0c; vi /root/.bashrc--- 追加 export XDG_CACHE_HOME/u01/.cache export PIP_CACHE_DIR/u01/.cache ---完结&#xff01;...

【Java SE】Lambda表达式

目录 ♫什么是Lambda表达式 ♫Lambda表达式的语法 ♫函数式接口 ♫Lambda表达式的使用 ♫变量捕获 ♫ Lambda表达式在集合中的使用 ♪Collection的foreach()&#xff1a; ♪List的sort()&#xff1a; ♪Map的foreach() ♫什么是Lambda表达式 Lambda 表达式是 Java SE 8中一个…...

Kafka-UI

有多款kafka管理应用&#xff0c;目前选择的是github上star最多的UI for Apache Kafka。 关于 To run UI for Apache Kafka, you can use either a pre-built Docker image or build it (or a jar file) yourself. UI for Apache Kafka is a versatile, fast, and lightweight…...

Unity 制作登录功能02-创建和链接数据库(SQlite)

国际惯例&#xff1a;先看效果 1.SQlite是一种嵌入型数据库 在Unity开发游戏时使用SQLite有多种原因&#xff0c;以下是其中一些主要原因&#xff1a; 嵌入式数据库&#xff1a;SQLite是一个嵌入式数据库引擎&#xff0c;这意味着它不需要单独的服务器进程。这使得使用SQLite非…...

算法 岛屿数量-(递归回溯)

牛客网 BM57. 二维矩阵&#xff0c;值为1表示岛屿&#xff0c;0表示海洋&#xff0c;求海洋中岛屿数量。 解题思路: 遍历二维数组&#xff0c;值为1增加岛屿数量记数&#xff0c;同时对此位置进行单独递归遍历上下左右4个方向&#xff0c;将数组坐标范围内同时值为1的元素置…...

安卓恶意应用识别(番外篇)(Python并行(多线程or多进程)执行cmd)

前言 本人为了批量反编译&#xff0c;不得不涉及到批量执行&#xff0c;之前没有彻底理解有关于多线程的概念和python方法&#xff0c;现在只能一步一步尝试&#xff0c;并且实践&#xff0c;写本文以记录。 1. 进程与线程 1.1 什么是进程&#xff1f; 1.1.1 概念 进程是一…...

基于大语言模型扬长避短架构服务

秘诀&#xff1a; 扬泛化之长&#xff0c; 避时延之短...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...

StarRocks 全面向量化执行引擎深度解析

StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计&#xff0c;相比传统行式处理引擎&#xff08;如MySQL&#xff09;&#xff0c;性能可提升 5-10倍。以下是分层拆解&#xff1a; 1. 向量化 vs 传统行式处理 维度行式处理向量化处理数…...

工厂方法模式和抽象工厂方法模式的battle

1.案例直接上手 在这个案例里面&#xff0c;我们会实现这个普通的工厂方法&#xff0c;并且对比这个普通工厂方法和我们直接创建对象的差别在哪里&#xff0c;为什么需要一个工厂&#xff1a; 下面的这个是我们的这个案例里面涉及到的接口和对应的实现类&#xff1a; 两个发…...

英国云服务器上安装宝塔面板(BT Panel)

在英国云服务器上安装宝塔面板&#xff08;BT Panel&#xff09; 是完全可行的&#xff0c;尤其适合需要远程管理Linux服务器、快速部署网站、数据库、FTP、SSL证书等服务的用户。宝塔面板以其可视化操作界面和强大的功能广受国内用户欢迎&#xff0c;虽然官方主要面向中国大陆…...

二维数组 行列混淆区分 js

二维数组定义 行 row&#xff1a;是“横着的一整行” 列 column&#xff1a;是“竖着的一整列” 在 JavaScript 里访问二维数组 grid[i][j] 表示 第i行第j列的元素 let grid [[1, 2, 3], // 第0行[4, 5, 6], // 第1行[7, 8, 9] // 第2行 ];// grid[i][j] 表示 第i行第j列的…...