如何弹出文件选择器并且选择文件？

最新推荐文章于 2024-07-23 16:54:53 发布
最新推荐文章于 2024-07-23 16:54:53 发布
阅读量1.3k 收藏 7
点赞数 3
文章标签： vue.js 前端 javascript 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZZZZZZZZjy/article/details/131745924
版权

 思维流程图

 弹出文件选择器

 

 

  1.  通过ref获取input的DOM对象 并直接触发click事件弹出选择框
  2. input的type为file用于向服务器上传文件。它会让用户选择一个或多个文件，然后将文件传送到指定的服务器上

  3. accept=".xlsx, .xls"只接收以.xlsx, .xls结尾的文件

 

 input的change事件表示：当用户显式提交改变时，会触发 change 事件。

 

 根据接口文档封装接口uploadExcel(data)并导入vue文件使用，event是input的change传的，event里面的target事件对象有个files【0】，files.length > 0表示文件大于0就上传，不大于0就没有文件上传， const data = new FormData()创建一个空对象实例，可以调用append()方法来添加数据，data通过参数传进接口uploadExcel(data)，await下方一定是成功，通过自定义事件通知父组件上传成功，父组件监听并重新获取员工数据，然后关闭弹层清空文件选择器

 

 

 失败的话catch捕获失败把成功放入try，失败清空文件选择器，使用dom对象把数据设置为空

  this.$refs['excel-upload-input'].value = ''，于是发现不论成功或者失败都要清空上传项，清空文件上传项，防止错误提示或选择不当导致文件名称，所以直接执行finally

总结：，文件弹框使用dom的click，文件选择监听的input的change事件，调用接口之前判断文件长度大于0，FormData类型添加进去，无论成功或失败都在finally中清空，成功是时候关闭了弹层，父组件也监听事件，重新加载数据。以上完成了上传功能

赵不困888（合作私信）
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue 选择本地文件目录
yxs646512415的博客
10-15 3万+
vue 选择本地文件目录先看效果原码片断 通过的vue结合原生的input 进行本地文件系统目录的选择 先看效果 传统的文件处理会有一些文件上传相关的插件，但有时候会有一些需求是不能简单选择一个文件上传就能解决的，如果要本地文件目录中的文件进行相关的逻辑处理，就比较麻烦，然后我做了本地一个文件目录选择的例子，只要得到目录地址，后面想怎么操作就看大家发挥了, 先看代码： 注解： 1处这里是一个普通的html 按钮，值得注意的是这里需要多加一个 webkitdirectory 参数，表示文件夹选择器。
vue实现弹窗选择
weixin_41815063的博客
10-11 3116
1、创建一个ImproveResume.vue <template> <div class="release-post"> <div class="header"> <img class="header_left" src="./images/left_header.png" alt="" @click="clickGoBack" /> &l..
vue 下载项目本地文件
最新发布
qq_57039857的博客
07-23 387
下载项目本地文件
vue实现文件路径选择
qq_52132550的博客
06-08 1856
基于vue实现文件选择，操作目录返回上一级，进入下一级
JS点击某个图标或按钮弹出文件选择框的实现代码
10-21
本文给大家介绍js点击点击某个图标或按钮弹出文件选择框的实现代码，代码简单易懂，非常不错，感兴趣的朋友可以参考下
从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]
weixin_34252686的博客
02-27 522
17-3-2更新： 谢谢@mengdu 补充的关于图片预览的另一种更简单方法 URL.createObjectURL()，具体在文章里补充 之前用Vue做了一个基础的组件vue-img-inputer，下面就叫vii，记录下在开发过程中遇到的知识点（都算比较基础，具体代码不会贴太多，都可以在项目仓库里看到）。 上传文件很多项目都要用到，...
Vue点击按钮选择本地文件
m0_52815842的博客
11-05 1万+
<* vue中 *> <input v-show="false" ref="fileRef" type="file" @change="fileChange"> <el-button @click="uploadFile"></el-button> methods:{ // 按钮事件 触发input输入框 xuan () { this.$refs.fileRef.dispatchEvent(new MouseEven.
js点击某个图标或按钮弹出文件选择框
qq_29663071的博客
05-13 1万+
html> head> meta charset="utf-8"> title>Demotitle> script type="text/javascript"> function F_Open_dialog() { document.getElementById("btn_file").click();
点击图片弹出文件选择（vue2）
qq_52683382的博客
05-05 1190
opacity: 0;思路：一张图片，一个input框（type="file"）,将input大小设置为和图片同等大小，然后使用。(注意：img标签的src只能接收base64,绝对路径，相对路径，不支持其他的！做项目的时候遇到一个功能，点击选择封面图片，上传图片的功能，取消显示回选择封面图片。该代码是vue2+element-ui的代码，只用于展示思路，请勿盲目copy。上面两种方法，第二种方法性能要个更好一些，所以个人更推荐第二种方法！
android文件选择器
03-31
在Android开发中，文件选择器是一个非常常见的组件，它允许用户在设备的文件系统中浏览并选择所需的文件或目录。本项目"android文件选择器"是专为Android平台设计的一个文件选择工具，采用PopupWindow实现，提供了一...
【C++软件调试技术】什么是pdb文件？如何使用pdb文件？哪些工具需要使用pdb文件？
热门推荐
dvlinker的技术专栏
06-04 1万+
本文结合多年来排查C++软件异常的实践，详细介绍什么是pdb文件，哪些工具需要使用到pdb文件，以及如何去使用pdb文件，以供大家借鉴或参考。
文件选择器
06-06
此源代码简单明了，适用于需要文件选择器的朋友
文件选择器FolderChooser
07-12
漂亮简洁的文件和文件夹选择器，支持指定文件类型和自定义文件图标 博客地址：http://blog.csdn.net/sinat_25689603/article/details/51887756
Android 文件选择器
07-09
用于选择文件夹中的文件
vue消息弹出框组件需要的文件
04-15
基于crip-vue-notice增加了点击消息监听。在msgPopup.vue通过发心跳请求获取需要弹出的消息，弹出后更新消息状态。 包括： 1，弹出框显示包括info, warning, success, error, normal五种预定义样式，也可自定义； 2，支持自动关闭和点击关闭，放了关闭监听函数和点击消息框监听函数，放在增加后续行为； 3，放了获取消息和更新消息状态的请求示例； 4，弹框组件挂载全局，不受页面跳转影响。
Windows批处理文件/文件夹选择器对话框
smarthack520的博客
06-20 2413
批处理脚本的文件/文件夹选择器对话框
Python 使用PyQt5 完成选择文件或目录的对话框方法
09-19
1. **导入必要的模块**：首先需要导入`PyQt5.QtWidgets`中的组件，如`QFileDialog`用于弹出文件对话框。 2. **设置动作触发器**：创建一个动作（`QAction`），并为其设置触发事件，以便在用户点击菜单项时弹出对话框...
点击按钮打开选择文件对话框
weixin_34399060的博客
07-23 2376
1.创建回调函数int CALLBACK BrowseCallbackProc(HWND hwnd, UINT uMsg, LPARAM lParam, LPARAM lpData){switch (uMsg) {case BFFM_INITIALIZED: //初始化消息::SendMessage(hwnd, BFFM_SETSELEC...
vscode插件开发中，弹出选择框并且返回file文件对象
05-26
在 VS Code 插件开发中，可以使用 `vscode.window.showOpenDialog()` 方法来弹出选择文件对话框，然后返回选中的文件路径。你可以在插件中将文件路径转换成文件对象。 下面是一个简单的示例代码： ```typescript import * as vscode from 'vscode'; import * as path from 'path'; import * as fs from 'fs'; export function activate(context: vscode.ExtensionContext) { let disposable = vscode.commands.registerCommand('extension.chooseFile', async () => { const options: vscode.OpenDialogOptions = { canSelectMany: false, openLabel: 'Select File', filters: { 'All files': ['*'] } }; const uri = await vscode.window.showOpenDialog(options); if (uri && uri[0]) { const filePath = uri[0].fsPath; const fileObj = fs.readFileSync(filePath, 'utf8'); vscode.window.showInformationMessage(`Selected file: ${path.basename(filePath)}`); console.log(fileObj); } }); context.subscriptions.push(disposable); } ``` 在上面的代码中，我们首先定义了一个 `vscode.OpenDialogOptions` 对象来配置文件选择对话框的选项，包括是否可以选择多个文件、对话框标题和文件过滤器等。然后，我们使用 `vscode.window.showOpenDialog()` 方法来显示文件选择对话框，并等待用户选择文件。如果用户选择了文件，我们就可以获取文件路径并将其转换成文件对象，最后在控制台输出文件内容。 注意，由于 `showOpenDialog()` 是一个异步方法，因此我们需要使用 `async/await` 来等待用户选择文件。同时，我们还需要将该命令注册到插件上下文中，以便在插件激活时使用。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值