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, .jpginput.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.mzph.cn/news/788494.shtml

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

相关文章

文本自动粘贴编辑器:支持自动粘贴并筛选手机号码,让信息处理更轻松

在信息时代的浪潮中&#xff0c;文本处理已成为我们日常工作与生活的重要组成部分。无论是商务沟通、社交互动还是个人事务处理&#xff0c;手机号码的筛选与粘贴都显得尤为关键。然而&#xff0c;传统的文本处理方式效率低下、易出错&#xff0c;已无法满足现代人的高效需求。…

Android Studio学习7——常用控件view

Android控件 双击shift键——>搜索想要找的文件 Ctrlshift回车——>补全“&#xff1b;”号 CtrlX——>删除一行&#xff0c;只需把鼠标放在那一行 windows自带字体

Set a Light 3D Studio:探索光影艺术的全新维度mac/win中文版

Set a Light 3D Studio 是一款领先的三维建模和渲染软件&#xff0c;它将设计师、艺术家和摄影师的创意想法转化为生动逼真的三维场景。这款软件以其强大的功能和直观的界面&#xff0c;成为行业内众多专业人士的首 选工具。 set.a.light 3D STUDIO中文版软件获取 在Set a Lig…

人工智能的真实盈利:掌握 ChatGPT-4 用于业务营销(全)

原文&#xff1a;Artificial Intelligence, Real Profits 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第一部分&#xff1a;理解基础知识 第一章&#xff1a; 人工智能和 ChatGPT-4 简介 在我们旅程的最初章节中&#xff0c;我们踏上了对人工智能&#xff08;AI…

【HTML】标签学习(下.4)

&#xff08;Hello&#xff01;大家好哇&#xff0c;今天我们将继续学习HTML的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; &#xff08;续接【HTML】标签学习&#xff08;下.3&#xff09;&#xff09; 3.4.2 <label&g…

nodeJs 实现视频的转换(超详细教程)

前段时间拿到一个视频是4k的&#xff0c;没法播放&#xff0c;于是通过 node.js 和 ffmpeg 实现了视频的转换。在win10 系统下实现。 所需工具 node 16.19 直接安装 ffmpeg-5.1.1-essentials_build 解压后重名 ffmpeg 放到C盘 然后配置下环境变量 Git-2.42.0.2-64-bit 直接…

4款在线网页原型图设计软件推荐

与桌面端相比&#xff0c;在线网页原型设计软件的使用具有优势&#xff0c;因为在线网页原型设计软件在整个使用过程中不需要安装&#xff0c;在线网页原型设计软件在任何地方都没有限制。更重要的是&#xff0c;无论是现在使用的 Linux&#xff0c;在线网页原型设计软件在操作…

[C++]使用OpenCV去除面积较小的连通域

这是后期补充的部分&#xff0c;和前期的代码不太一样 效果图 源代码 //测试 void CCutImageVS2013Dlg::OnBnClickedTestButton1() {vector<vector<Point> > contours; //轮廓数组vector<Point2d> centers; //轮廓质心坐标 vector<vector<Point&…

day3| 从socket部分继续学习

package mainimport ("fmt""log""net/http""github.com/gorilla/websocket" )var UP websocket.Upgrader{/*握手时间缓冲区(包括写和读)缓冲池指定用于生成HTTP错误响应的函数对过来的请求进行校验指定服务器是否应尝试根据进行协商消…

RUST Rover 条件编译 异常处理

按官方处理发现异常 会报异常 error: failed to parse manifest at C:\Users\topma\RustroverProjects\untitled2\Cargo.toml 修改模式如下才能正常编译 网上说明 这样处理 [features] print-a [] print-b [] full ["print-a","print-b"]

Mybatis——一对多关联映射

一对多关联映射 一对多关联映射有两种方式&#xff0c;都用到了collection元素 以购物网站中用户和订单之间的一对多关系为例 collection集合的嵌套结果映射 创建两个实体类和映射接口 package org.example.demo;import lombok.Data;import java.util.List;Data public cla…

【TypeScript系列】与其它构建工具整合

与其它构建工具整合 构建工具 BabelBrowserifyDuoGruntGulpJspmWebpackMSBuildNuGet Babel 安装 npm install babel/cli babel/core babel/preset-typescript --save-dev.babelrc {"presets": ["babel/preset-typescript"] }使用命令行工具 ./node_…

P1002 过河卒:图论动态规划入门

本题链接&#xff1a;P1002 [NOIP2002 普及组] 过河卒 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路&#xff1a; 本题与之前的动态规划不一样&#xff0c;比如背包问题和子序列问题等都是线性dp&#xff0c;也就是dp数组其实主要用于存储计算的结果&#xff0c;而这题…

面试算法6/400-和至少为 K 的最短子数组

题目 给你一个整数数组 nums 和一个整数 k &#xff0c;找出 nums 中和至少为 k 的 最短非空子数组 &#xff0c;并返回该子数组的长度。如果不存在这样的 子数组 &#xff0c;返回 -1 。 子数组 是数组中 连续 的一部分。 示例 1&#xff1a; 输入&#xff1a;nums [1], …

vue 基础回顾

vue 基础回顾 一、重要文件 node_modules&#xff1a;当前项目依赖的 js 包assets&#xff1a;静态资源存放目录(图片)components&#xff1a;公共组件存放目录App.vue&#xff1a;主组件&#xff0c;页面的入口文件main.js&#xff1a;整个项目入口文件package.json&#xf…

LabVIEW专栏二、调用子VI

该节目标是创建带子vi&#xff0c;修改vi属性&#xff0c;测试可重入和不可重入的区别 一 、设置子VI 把VI封装成为子VI&#xff0c;可以帮助模块化程序&#xff0c;简化代码结构。 任何VI本身都可以成为别的VI的子VI。 1.1、设置输入输出端子 1、在前面板空白处&#xff0…

Matlab|基于关键场景辨别算法的两阶段鲁棒微网优化调度

目录 主要内容 部分代码 结果一览 下载链接 主要内容 该模型主要求解的是微网两阶段鲁棒优化调度问题&#xff0c;与目前大部分用CCG算法不同&#xff0c;模型创新性的采用关键场景辨别法&#xff0c;通过少量的迭代辨别出最恶劣的场景&#xff0c;针对光伏出力的…

obs直播推流 + ffmpeg参数

OBS 启动参数设为 --startstreaming &#xff0c; 可以让它启动后自动开始直播 对应ffmpeg参数&#xff1a; echo off :loop ffmpeg -re -i a.mp4 -r 24 -c:v libx264 -preset ultrafast -profile:v baseline -g 24 -keyint_min 24 -x264-params nal-hrdcbr -b:v 2500k -minr…

mybatis批量新增数据

数据量大的时候如果在循环中执行单条新增操作&#xff0c;是非常慢的。那么如何在mybatis中实现批量新增数据呢&#xff1f; 方法 insert 标签的 foreach 属性可以用于批量插入数据。您可以使用 foreach 属性遍历一个集合&#xff0c;并为集合中的每个元素生成一条插入语句。…

洛谷P1000超级玛丽游戏题解[Python, Rust, Go]

题目 打印超级玛丽字符图像 小技巧 直接复制题目的超级玛丽符号首行会有空格问题&#xff0c;一直AC不过&#xff0c;一行一行地复制就OK了&#x1f44c;。 Rust 题解 fn main() {println!(" ********************####....#.#..###.....##....###...…