vue 选择本地文件目录

先看效果
原码片断

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

先看效果

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

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

原码片断

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

<el-form ref="form" :model="form" label-width="120px" style="width: 50%"><el-form-item label="保存至文件夹"><input type="file" id="file" hidden @change="fileChange" webkitdirectory><el-input placeholder="请输入内容" v-model="form.imgSavePath" class="input-with-select"><el-button slot="append" icon="el-icon-folder" type="success" @click="btnChange"></el-button></el-input></el-form-item></el-form>

data() {return {form: {imgSavePath: ''}}},methods: {fileChange(e) {try {const fu = document.getElementById('file')if (fu == null) returnthis.form.imgSavePath = fu.files[0].pathconsole.log(fu.files[0].path)} catch (error) {console.debug('choice file err:', error)}},btnChange() {var file = document.getElementById('file')file.click()}}

vue 选择本地文件目录相关推荐

vue里面怎么删除部分页面_基于VUE选择上传图片并页面显示（图片可删除）
基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件: HTML文本内容: 相关照片 JS文本内容: /** * 从 file 域获取本地图片 url */ fun ...
react和vue配置本地代理
React 在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可. 但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的 ...
[vue] 分析下vue项目本地开发完成后部署到服务器后报404是什么原因呢？
[vue] 分析下vue项目本地开发完成后部署到服务器后报404是什么原因呢? 1.检查nginx配置,是否正确设置了资源映射条件: 2.检查vue.config.js中是否配置了publicPath ...
解决 VUE：本地运行和服务器上运行样式不一致，run、build 运行时样式有出入
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 我的情况: 我遇到 2 种情况,一个是表格的分页样式有变化.另一个是导航菜单样式有变化. 2. ...
php打开文件对话框,JS打开选择本地文件的对话框
方法一: 在定义的form中添加以下javascript代码: { anchor : '95%', xtype: 'fileuploadfield', id: 'form-file', emptyTe ...
vue调用本地摄像头实现拍照
前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. 实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <templat ...
js 选择本地图片并显示
选择本地图片并将所选图片显示 <html> <body> <img id="image" src=""/> <br/& ...
JS打开选择本地文件的对话框
方法一: 在定义的form中添加以下javascript代码: { anchor : '95%', xtype: 'fileupload ...
Vue调用本地摄像头权限
使用电脑本地摄像头的权限关于如何调用本地摄像头的问题准备工具 (VS Code,Vue脚手架工具,Element UI) vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行 ...

vue 选择本地文件目录

vue 选择本地文件目录

先看效果

原码片断

vue 选择本地文件目录相关推荐

最新文章

热门文章