vue 选择本地文件目录

最新推荐文章于 2024-04-29 13:27:37 发布
置顶 最新推荐文章于 2024-04-29 13:27:37 发布
阅读量3.7w 收藏 87
点赞数 20
分类专栏： vue 文件目录选择 文章标签： vue vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxs646512415/article/details/109097588
版权

vue 选择本地文件目录

通过的vue结合原生的input 进行本地文件系统目录、路径的选择（不需要ActiveXObject，任何浏览器都支持）

先看效果

在这里插入图片描述

在这里插入图片描述

传统的文件处理会有一些文件上传相关的插件，但有时候会有一些需求是不能简单选择一个文件上传就能解决的，如果要本地文件目录中的文件进行相关的逻辑处理，就比较麻烦，然后我做了本地一个文件目录选择的例子，只要得到目录地址，后面想怎么操作就看大家发挥了, 先看代码：
在这里插入图片描述

注解：
1处这里是一个普通的html 按钮，值得注意的是这里需要多加一个 webkitdirectory 参数，表示文件夹选择器。
2处是选择过后中，在页面中回显的入口，可根据自己需求处理
3处是做为vue的事件触发入口 ，回样可根据自己需要来。
大概就这些，有什么不懂的或有什么想法可以留言交流。

原码片断

大概就这些，有什么不懂的或有什么想法可以留言交流.

<el-form ref="form"
最低0.47元/天 解锁文章
duuuper
关注
  • 20
    点赞
  • 踩
  • 87
    收藏
    觉得还不错? 一键收藏
  • 49
    评论
专栏目录
vue生成文件本地打开查看效果的实例
10-18
总结起来，Vue生成文件本地打开查看效果的关键在于调整Webpack的公共路径配置，使其适应本地文件系统的路径解析规则。通过将`assetsPublicPath`设置为'./'，可以确保在本地打开dist目录下的HTML文件时，所有相关的...
选择目录和选择文件对话框
10-10
选择目录 选择文件 对话框 vs2010 具体描述在blog： http://blog.csdn.net/cau_eric/article/details/12570815
使用Vue 自定义文件选择器组件的实例代码
11-21
本文 GitHub  https://github.com/qq44924588… 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。 文件选择元素是web上最难看的 input 类型之一。它们在每个浏览器中实现的方式不同，而且通常非常难看。这里有一个解决办法，就是把它封装成一个组件。 安装 如果你尚未设置项目，可以使用 vue-cli 的 webpack-simple 模板启动一个新项目。 $ npm install -g vue-cli $ vue init webpack-simple ./file
VUE如何下载表格，自动下载以及让用户选择路径下载(弹窗windows文件夹自动写入资源)
最新发布
weixin_42759398的博客
04-29 355
【代码】VUE如何下载表格，自动下载以及让用户选择路径下载(弹窗windows文件夹自动写入资源)
element-plus实现本地文件夹选择功能
于坤
04-19 931
在 Vue 3 中使用 Element Plus 时，如果你想实现选择本地文件夹的功能，需要了解一点：Element Plus UI 库本身并没有专门的组件来选择文件夹。但是，你可以利用原生 HTML5 的元素来实现这一功能，并通过 Element Plus 的样式增强 UI 体验。
vue访问本地资源
m0_62873187的博客
06-01 2367
vue项目不能直接访问本地资源，因为创建了node服务器，服务器上不能直接访问客户端的文件，而html文件可以直接访问本地资源，因为这个html本来就是本地打开的。如： <img :src="'http://localhost/'+url" alt="">只修要修改nginx.conf文件就行。在vue项目中直接访问ip+端口号即可。可以把本地资源在nginx上配成服务。配置好重启一下nginx即可。
vue 访问本地文件 相对路径 文件目录 three.js 加载模型
大英雄不该去雪山打滚
12-30 5317
需要注意的一点就是，你路径已/开头，是从public文件开始，public下的models文件夹下的test.gltf，那么url就是。搞了一下把three.js融入vue，前面比较顺利，在加载文件时遇到了问题（GLTFLoader）我报这个错的原因是模型文件路径错误，…/一层一层往上找了半天，愣是没碰出来个对的路径，吐了。搞了半天，老是报这么个错，网上也没搜到解决方案，而且这个错误给的不明确，
vue 读取本地文件
花生日记
06-03 9293
因此，我们需要将 dom树中的根节点下的dom_name属性设置为 name，这样可以将组件的根节点下的属性也设置为 name属性，从而实现获取数据。比如下面这段代码： 这个组件在根节点下使用了 dom树，所以我们需要将 dom树中的根节点下的属性设置为 name，这样可以实现通过 dom树中的根节点获取数据。当我们要使用 dom树中的根节点获取数据时，使用下面代码来实现： 上面这段代码中，我们先对根节点下的 dom树进行简单的梳理和修改： 这样做不仅可以方便我们调用这个方法，还可以将文件内容显示出来。
使用electron-vue获取文件夹的路径
weixin_53294082的博客
08-16 3590
记录一次开发过程中遇到的bug，我们的项目中需要将vue项目打包为桌面应用软件，为此我们引入了electron框架，在这个过程中，我们需要获取到用户电脑上面文件夹的绝对路径，用这篇文章记录一下
vue访问本地public文件夹下面的文件 404
云
07-19 1090
vue访问本地public文件夹下面的文件 404
vue把elementUi的输入框当做文件选择框使用，使用技巧
07-24 1283
其实刚开始，我是想使用元素获取焦点事件，然后通过处理这个焦点事件，打开对话框，然后选择文件，但是这里有个问题，就是选择完文件之后，这个元素还是获取焦点，然后就会继续打开对话框，无限循环........，即便你通过e.target.blur() 让输入框失去了焦点，但是因为这是ui框架包装的输入框，所以还是会继续获取焦点，所以这个方案废弃。然后我就在想，既然这个输入框不能使用click事件，那给它包一个元素，在外层元素上绑定点击事件，然后通过事件冒泡来实现呢？嗯，经过我的不懈努力，这个方案不错。
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.
vue 文件目录结构详解
11-26
项目简介 基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在... 本地服务器：express 目录结构 ├── README.md 项目介绍 ├── index.html 入口页面 ├── build 构建脚本目录 │
vue读取本地的excel文件并显示在网页上方法示例
10-16
7. **文件路径**：注意，由于浏览器安全限制，无法直接通过`axios`读取本地文件系统中的文件。在示例中，假设`task_list.xlsx`文件位于`public`目录下，可以通过相对URL直接访问。这意味着在开发环境中，文件需要...
最新的vue读取本地json文件代码
01-23
最新的vue读取本地json文件数据，下载解压，运行cmd,cd到这个目录，运行npm yun dev,然后直接访问就能获取数据
vue-访问本地json文件
weixin_46479909的博客
10-29 1502
注意：此方法只可以在本地访问，如果打包上线后，将不能使用文件数据将json文件放在public文件夹中（json文件要以英文命名）用fetch可以直接访问public下的文件。
vue elementui + Java实现获取本地文件夹路径，绝对路径。（Ctrl C+V 即用）
my_batis的博客
08-18 9591
实现获取本地文件夹路径，不支持文件获取，文件上穿 选择文件夹得弹框效果 前端代码 <!DOCTYPE html> <html> <head> <head> <!-- 兼容IE --> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="../css/element-index.css"&gt
vue3里怎么遍历videoList的本地文件夹
06-10
在Vue3中，你可以使用JavaScript中的File API来获取本地文件夹中的视频文件列表，然后使用v-for指令将其遍历。以下是示例代码： ```html <template> <div> <h1>Video List</h1> <ul> <li v-for="(video, index) in videoList" :key="index"> {{ video.name }} </li> </ul> </div> </template> <script> export default { data() { return { videoList: [] } }, mounted() { this.getVideoList() }, methods: { getVideoList() { const videoFolder = '/path/to/video/folder' const fileInput = document.createElement('input') fileInput.type = 'file' fileInput.webkitdirectory = true fileInput.addEventListener('change', () => { const files = fileInput.files for (let i = 0; i < files.length; i++) { if (files[i].type.includes('video')) { this.videoList.push(files[i]) } } }) fileInput.click() } } } </script> ``` 在上面的代码中，我们先创建一个空数组来存储本地视频文件列表。然后，我们在组件挂载时调用`getVideoList()`方法来获取视频列表。在`getVideoList()`方法中，我们首先定义了一个`videoFolder`变量来存储本地视频文件夹的路径。然后，我们创建了一个`input`元素，并将其类型设置为`file`，并将其`webkitdirectory`属性设置为`true`，这样用户就可以选择一个文件夹而不是单个文件。接下来，我们添加了一个`change`事件监听器，并在其中循环遍历用户选择的所有文件，将视频文件添加到`videoList`数组中。最后，我们调用了`click()`方法来触发文件选择对话框。最终，我们使用v-for指令将`videoList`数组中的视频文件遍历并渲染到页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 49
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值