vue3中怎么点击按钮就上传文件

<el-button text type="primary" @click="importBillExcel(row)">导入账单</el-button>
// 导入客户账单Excel表
const importBillExcel = (row) => {
    let input = document.createElement('input')
    input.type = 'file'
    input.accept = '.pdf, .png, .zip, .jpg'; // 限制选择的文件类型为 .pdf, .png, .zip, .jpg
    input.style.display = 'none'
    document.body.appendChild(input)
    input.click();
    input.onchange = (e) => {
        const file = e.target.files[0] // 获取文件对象
        let paramsFile = new FormData() // 转为表单格式
        paramsFile.append('file',file) // 添加属性和值
        paramsFile.append('receivableBillSn',row.receivableBillSn) // 添加属性和值
        importCustomerBill(paramsFile).then(res=>{
            document.body.removeChild(input)
        })
    }
}

说明:file和receivableBillSn是接口importCustomerBill需要传递的参数;整个实现过程就是利用了input标签的type=“file”的属性,这个属性就是可以弹出文件选择对话框;importBillExcel方法中就是创建了一个input节点添加type="file"属性,最后在移除input节点;

效果

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

摸鱼123

摸鱼https://toyaml.com/windowsupdate.html

3D模型格式转换工具HOOPS Exchange如何将3D文件加载到PRC数据结构中?

HOOPS Exchange是一款高效的数据访问工具&#xff0c;专为开发人员设计&#xff0c;用于在不同的CAD&#xff08;计算机辅助设计&#xff09;系统之间进行高保真的数据转换和交换。由Tech Soft 3D公司开发&#xff0c;它支持广泛的CAD文件格式&#xff0c;包括但不限于AutoCAD的…

js手持小风扇

文章目录 1. 演示效果2. 分析思路3. 代码实现 1. 演示效果 2. 分析思路 先编写动画&#xff0c;让风扇先转起来。使用 js 控制动画的持续时间。监听按钮的点击事件&#xff0c;在事件中修改元素的animation-duration属性。 3. 代码实现 <!DOCTYPE html> <html lang…

Spring IOC控制反转、DI注入以及配置

1.使用xml的方式进行配置IOC容器&#xff0c;首先引入依赖 在Resource资源下配置&#xff0c;applicationContext.xml ,刷新mevan后可以直接选择配置spring.xml文件 <!-- spring核心用来管理bean --><dependency><groupId>org.springframework</g…

代码随想录算法训练营Day42|LC416 分割等和子集

一句话总结&#xff1a;背包问题。 原题链接&#xff1a;416 分割等和子集 拿到题先明确这是动态规划的题&#xff0c;具体类型是01背包问题。到了题目解法这里&#xff0c;首先判断数组加和是否为偶数&#xff0c;否则return false。然后就是01背包问题的解题思路了。具体地&…

InterliJ IDEA基本设置

安装好idea后&#xff0c;将软件打开&#xff0c;可以进行基础设置 1.打开软件&#xff0c;先安装插件-汉化包&#xff08;不推荐&#xff0c;最好使用英文版&#xff09;&#xff0c;本次我们使用汉化版本完成基本设置&#xff0c;后期希望大家适应英文版的开发环境。&#x…

【Vue3源码学习】— CH2.7 Computed: Vue 3 计算属性深入解析

Computed: Vue 3 计算属性深入解析 1.计算属性的基本用法2. ComputedRefImpl 类深入解析JavaScript 中的 getter 函数 3. 计算属性的创建&#xff1a;computed 方法解析3.1 源码解析3.2 使用示例 4. 计算属性的工作原理5. 手动实现简化的计算属性6. 结语 在 Vue 3 的响应式系统…

蓝桥杯-dfs搜索模板题(一)

蓝桥杯-dfs搜索模板题&#xff08;一&#xff09; P2089 烤鸡P1088 火星人P1149 火柴棒等式P2036 PERKETP1135 奇怪的电梯结语 P2089 烤鸡 对于每个位置枚举数字 #include<bits/stdc.h>using namespace std;const int N1010;int n;int arr[N];//临时方案 int res0;//方案…

【闲聊】-网页划词翻译插件

英文之痛 作为程序猿&#xff0c;常常需要接触外文网站&#xff0c;以前很痛苦&#xff0c;现在大模型时代有很多智能工具可以直接翻译&#xff0c;翻译的虽然越来越好&#xff0c;但是还是不如直接看英文能理解本义&#xff0c;相信我&#xff0c;看翻译的理解和看原文的理解…

AJAX —— 学习(二)

目录 一、利用 JSON 字符串 返回数据 &#xff08;一&#xff09;基础代码 &#xff08;二&#xff09;原理及实现 二、nodmon 工具 自动重启服务 &#xff08;一&#xff09;用途 &#xff08;二&#xff09;下载 &#xff08;三&#xff09;使用 三、IE 缓存问题 &a…

开源模型应用落地-chatglm3-6b模型小试-入门篇(一)

一、前言 刚开始接触AI时&#xff0c;您可能会感到困惑&#xff0c;因为面对众多开源模型的选择&#xff0c;不知道应该选择哪个模型&#xff0c;也不知道如何调用最基本的模型。但是不用担心&#xff0c;我将陪伴您一起逐步入门&#xff0c;解决这些问题。 在信息时代&#xf…

ADB 命令之 模拟按键/输入

ADB 命令之 模拟按键/输入 模拟按键/输入 在 ​​adb shell​​​ 里有个很实用的命令叫 ​​input​​&#xff0c;通过它可以做一些有趣的事情。 ​​input​​ 命令的完整 help 信息如下&#xff1a; Usage: input [<source>] <command> [<arg>...] Th…

MySQL 中将使用逗号分隔的字段转换为多行数据

在我们的实际开发中&#xff0c;经常需要存储一些字段&#xff0c;它们使用像, - 等连接符进行连接。在查询过程中&#xff0c;有时需要将这些字段使用连接符分割&#xff0c;然后查询多条数据。今天&#xff0c;我们将使用一个实际的生产场景来详细解释这个解决方案。 场景介绍…

数据结构——红黑树详解

一、红黑树的定义 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路径会比其他路径长出两倍&#xff0c…

转专业:集成电路、微电子、电子信息选哪个?

目录 集成电路专业 微电子技术专业 电子信息工程专业 综合分析 在考虑转专业到集成电路、微电子或电子信息时&#xff0c;您需要考虑多个因素&#xff0c;包括个人兴趣、专业课程内容、行业前景以及未来就业市场的需求。以下是关于这三个专业的详细分析&#xff0c;以及它们…

酷开科技智慧AI让酷开系统大显身手!

时代的浪潮汹涌而至&#xff0c;人工智能作为技术革新和产业变革的重要引擎&#xff0c;正深刻地影响着各行各业。在科技的海洋中&#xff0c;AI技术正逐渐渗透到我们的日常生活中&#xff0c;为我们带来前所未有的便捷和智慧。酷开科技用技术探索智慧AI&#xff0c;别看它只是…

让六西格玛培训有效的三个步骤,拿走不谢!

近年来&#xff0c;六西格玛作为一种先进的质量管理方法&#xff0c;被众多企业视为提升产品质量、优化流程、减少浪费的利器。然而&#xff0c;如何使六西格玛培训真正落地生根&#xff0c;发挥出其应有的效果&#xff0c;成为了许多企业关注的焦点。本文&#xff0c;天行健Si…

Java零基础入门到精通_Day 4

方法的重载 就是同一个类中的相同方法名的多个方法&#xff0c;但是他们的参数不同&#xff0c;类型不同或者参数个数不同。 &#xff08;与返回值无关&#xff09; package Base_One;public class Base_005 {public static void main(String[] args) {// Main method logic …

探析Drools规则引擎的工作机制

目录 一、工作原理 二、工作流程 2.1 初始化环境 2.2 添加规则文件 2.3 编译规则文件 2.4 插入到工作内存 2.5 规则匹配与激活 2.6 规则执行 三、Drools 其他特性 3.1 符合事实 3.2 决策表 3.3 规则生命周期管理 3.4 规则流 四、Rete 算法 一、工作原理 Drools 规则引擎的工…

如何理解Java注解反射

Java 8 中文版 - 在线API手册 - 码工具 什么是注解 ◆Annotation是从JDK5.0开始引入的新技术 ◆Annotation的作用: 不是程序本身&#xff0c;可以对程序作出解释.(这一点和注释(comment)没什么区别) 可以被其他程序(比如:编译器等)读取 Annotation的格式: > 注解是以&quo…