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

news2024/12/23 17:00:03
<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节点;

效果

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

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

相关文章

基于知识图谱的跨项目安全缺陷报告预测方法

源自&#xff1a;软件学报 作者&#xff1a;郑炜, 刘程远, 吴潇雪, 陈翔, 成婧源, 孙小兵, 孙瑞阳 “人工智能技术与咨询” 发布 摘 要 安全缺陷报告可以描述软件产品中的安全关键漏洞. 为了消除软件产品的安全攻击风险, 安全缺陷报告(security bug report, SBR)预测越来越…

QT - 日志:qDebug/qInfo/qWarning/qCritical

篇一、日志打印函数 头文件&#xff1a; #include <QDebug> 代码&#xff1a;qDebug()<<"hello world!"; 其他打印级别&#xff1a; qInfo(): 普通信息 qDebug(): 调试信息 qWarning(): 警告信息 qCritical(): 严重错误 qFatal(): 致命错误 1. qDebug…

认识什么是Webpack

目录 1. 认识Webpack 1.1. 什么是Webpack?&#xff08;定义&#xff09; 1.2. 使用Webpack 1.2.1. 需求 1.2.2. 步骤 1.3. 入口和出口默认值 1.3.1. 需求代码如下 2. 修改Webpack打包入口和出口 2.1. 步骤&#xff1a; 2.2. 注意 3. Webpack自动生成html文件 3.1.…

OpenHarmony实战:轻量带屏解决方案之恒玄芯片移植案例

本文章基于恒玄科技 BES2600W 芯片的欧智通 Multi-modal V200Z-R 开发板&#xff0c;进行轻量带屏开发板的标准移植&#xff0c;开发了智能开关面板样例&#xff0c;同时实现了 ace_engine_lite、arkui_ui_lite、aafwk_lite、appexecfwk_lite、HDF 等部件基于 OpenHarmony Lite…

【C++庖丁解牛】高阶数据结构---红黑树详解(万字超详细全面介绍红黑树)

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1.红黑树的概念2.红黑…

【Go】十七、进程、线程、协程

文章目录 1、进程、线程2、协程3、主死从随4、启动多个协程5、使用WaitGroup控制协程退出6、多协程操作同一个数据7、互斥锁8、读写锁9、deferrecover优化多协程 1、进程、线程 进程作为资源分配的单位&#xff0c;在内存中会为每个进程分配不同的内存区域 一个进程下面有多个…

为什么mac文件拖拽不了 mac文件拖不进硬盘里 macbookpro文件无法拖进移动硬盘 Tuxera NTFS for Mac 2023绿色

如果你是一位Mac用户&#xff0c;你可能会遇到这样的问题&#xff1a;你想把Mac上的文件拖拽到其他位置&#xff0c;比如桌面、文件夹或者外接硬盘&#xff0c;但是却发现无法操作&#xff0c;这是为什么呢&#xff1f;这篇文章将为你解答为什么mac文件拖拽不了&#xff0c;以及…

深入探索Go语言:hash/maphash实战应用与优化技巧

深入探索Go语言&#xff1a;hash/maphash实战应用与优化技巧 引言基础概念哈希函数简介Go中的哈希处理maphash的位置和结构关键特性 maphash的基本用法创建和使用Hash对象maphash.Hash的关键方法使用场景 maphash的高级技巧优化数据结构避免哈希碰撞实现自定义哈希函数 maphash…

使用 XCTU 进行 XBee 无线 (OTA) 固件更新

通过 X-CTU 无线 (OTA) 更新固件&#xff1a; 1. 将XBee加载到 XCTU。将此XBee模块AP参数设置为 API 模式 1 (AP1) 和波特率 115200 (BD7) 以加快进一步的步骤。 2. 在无线模块列表中&#xff0c;选择“发现无线模块”按钮。 3. XCTU 将执行网络发现。然后&#xff0c;您…

Open-Sora环境搭建推理测试

引子 Sora&#xff0c;2024年2月15日&#xff0c;OpenAI发布的人工智能文生视频大模型。支持60秒视频生成&#xff0c;震荡了国内国际学术圈、广告圈、AI教培圈。Sora最主要有三个优点&#xff1a;第一&#xff0c;“60s超长视频”&#xff0c;之前文本生成视频大模型一直无法真…

校园局域网钓鱼实例

Hello &#xff01; 我是"我是小恒不会java" 本文仅作为针对普通同学眼中的网络安全&#xff0c;设计的钓鱼案例也是怎么简陋怎么来 注&#xff1a;本文不会外传代码&#xff0c;后端已停止使用&#xff0c;仅作为学习使用 基本原理 内网主机扫描DNS劫持前端模拟后端…

篮球竞赛预约平台的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)篮球馆,篮球赛,竞赛项目,赛事预约

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读300套最新项目持续更新中..... 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含ja…

如何启用远程访问?

在当今信息化的社会中&#xff0c;远程访问已成为许多企业和个人不可或缺的工具。通过远程访问&#xff0c;用户可以在任何时间、地点轻松连接到他们的数据和应用程序&#xff0c;提高工作效率&#xff0c;增加便利性。本文将探讨如何启用远程访问&#xff0c;以及天联组网在解…

绿色wordpress外贸建站模板

绿色wordpress外贸建站模板 https://www.mymoban.com/wordpress/6.html

docker容器技术篇:Docker API配置与常用操作

docker容器技术篇&#xff1a;Docker API配置与使用 一、API具体是什么&#xff1f; 百科解释应用程序接口&#xff08;API&#xff09;&#xff0c;又称为应用编程接口&#xff0c;就是软件系统不同组成部分衔接的约定&#xff0c;蒙了吧&#xff01;&#xff01;&#xff0…

Python 之 Flask 框架学习

毕业那会使用过这个轻量级的框架&#xff0c;最近再来回看一下&#xff0c;依赖相关的就不多说了&#xff0c;直接从例子开始。下面示例中的 html 模板&#xff0c;千万记得要放到 templates 目录下。 Flask基础示例 hello world from flask import Flask, jsonify, url_fora…

舞蹈网站制作分享,舞蹈培训商城网站设计案例分享,wordpress主题分享

嘿&#xff0c;朋友们&#xff01;今天我要跟你们唠一唠一个超级酷炫的舞蹈培训商城网站设计案例。 咱先说说这个网站的目标哈&#xff0c;那就是得让喜欢舞蹈的小伙伴们能够轻轻松松找到自己心水的课程和商品。 那制作过程都有啥呢&#xff1f;别急&#xff0c;听我慢慢道来。…

C#开发中一些常用的工具类分享

一、配置文件读写类 用于在开发时候C#操作配置文件读写信息 1、工具类 ReadIni 代码 using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices; using System.Text; using System.Threading.Tasks;namesp…

如何将本地仓库放到远程仓库中

在我们仓库创建好之后&#xff0c;我们复制好ssh 接着我们需要使用git remote add<shortname><url>这个命令 shortname就是我们远程仓库的别名 接着使用git remote -v这个命令查看一下目前远程仓库的别名和地址 原本还有一个指令git branch -M main 指定分支的名…

全志 Linux Qt

一、简介 本文介绍基于 buildroot 文件系统的 QT 模块的使用方法&#xff1a; • 如何在 buildroot 工具里编译 QT 动态库&#xff1b; • 编译及运行 qt_demo 应用程序&#xff1b; • 适配过程遇到的问题。 二、QT动态库编译 在项目根路径执行 ./build.sh buildroot_menuc…