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节点;

效果

相关推荐
蓝天白云下遛狗4 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come1123427 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志1 小时前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui