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

html 复制代码
<el-button text type="primary" @click="importBillExcel(row)">导入账单</el-button>
javascript 复制代码
// 导入客户账单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节点;

效果

相关推荐
t2007183 分钟前
4.27 react第一天
前端·react.js·前端框架
飞天牛牛7 分钟前
前端小知识:彻底搞懂 CSS 的 `position: sticky`!
前端
大名人儿18 分钟前
【JS事件循环机制event-loop】
javascript·事件循环·宏任务·微任务·event-loop
vim怎么退出18 分钟前
46.二叉树展开为链表
前端·leetcode
薛定谔的猫225 分钟前
Composition API的深入理解与最佳实践
前端·vue.js
NaN_37227 分钟前
新手教程-使用 Android Studio 搭建 React Native 项目开发环境
前端
天天扭码36 分钟前
JavaScript 中 apply 和 call 方法的区别与应用场景
前端·javascript·面试
parade岁月39 分钟前
TypeScript 全局类型声明文件规范性分析与归纳
前端·vue.js·typescript
溪i40 分钟前
react-spring/web + children not defined
前端·spring·react.js
纪元A梦44 分钟前
华为OD机试真题——阿里巴巴找黄金宝箱Ⅰ(2025A卷:100分)Java/python/JavaScript/C/C++/GO最佳实现
java·c语言·javascript·c++·python·华为od·go