vue elementui + Java实现获取本地文件夹路径，绝对路径。（Ctrl C+V 即用）

最新推荐文章于 2023-08-16 12:52:10 发布
最新推荐文章于 2023-08-16 12:52:10 发布
阅读量9.4k 收藏 25
点赞数 5
分类专栏： java vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my_batis/article/details/119781273
版权
java 同时被 2 个专栏收录
12 篇文章 3 订阅
订阅专栏
vue
2 篇文章 0 订阅
订阅专栏

实现获取本地文件夹路径，不支持文件获取，文件上穿

最终获取后效果

选择文件夹得弹框效果

在这里插入图片描述

前端代码

<!DOCTYPE html>
<html>
<head>

<head>
    <!-- 兼容IE -->
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/element-index.css">
    
    <!-- 自定义接口地址配置 -->
    <script src="../config/api.js"></script>
    <!-- import JavaScript -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/element-index.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
   

</head>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f4f8f2;
    }

    [v-cloak] {
        display: none;
    }
    .el-scrollbar__wrap{
        margin-right: 40px !important;
    	margin-left: 20px;
    }
</style>

<body>
<div id="app" v-cloak>
    <el-container>
        <el-header style="margin-top: 20px; height: 40px;">
            <el-form :inline="true"  size="mini" class="demo-form-inline">
                <el-form-item label="数据">
                    <el-input clearable v-model="dfpath" placeholder="数据" size="mini"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleGetPath('待测数据')" size="mini">...</el-button>
                </el-form-item>
                 <el-form-item label="数据">
                    <el-input clearable  v-model="jfpath"  placeholder="数据" size="mini"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleGetPath('检测数据') "size="mini">...</el-button>
                </el-form-item>
                <el-dialog title="" :append-to-body="true" :visible.sync="routeDialogVisible"  width="600px" :close-on-click-modal="false"  >
			      <el-form >
			        <el-form-item label="">
			          <el-input style="width:450px; padding-left:20px" size="mini" v-model="filePath">
			          </el-input>
			           <el-button style="float: right; margin: 5px 40px 0 0" size="mini" @click="backRoute()" >后退</el-button>
			        </el-form-item>
			        <el-scrollbar style="height: 350px">
			           <div v-for="(item, index) in fileList" v-if="index>=0" :key="index">
	                     <el-row :gutter="30">
	                        <el-col :span="20" style="display: flex;">
		                        <el-input  @click.native="clickData(fileList[index])" v-model="fileList[index]" style="margin-bottom: 10px;" type="button"></el-input>
	                        </el-col>
	                     </el-row>
				        </div>
			        </el-scrollbar>
			      </el-form>
			      <!-- 内容底部区域 -->
			      <span slot="footer" class="dialog-footer">
			        <el-button @click="closeGetPath()">取消</el-button>
			        <el-button type="primary" @click="confirmRoute()">确 定</el-button>
			      </span>
			   </el-dialog>
                
                
            </el-form>
        </el-header>
    </el-container>
</div>
</body>

<script>
    var data = {
        //文件夹数组
        fileList: [],
        routeDialogVisible:false,
        //文件夹路径
        filePath:'请选择文件所在路径',
        //选择的类别
        type:'',
        //待测数据
        dfpath:'',
        //检测报告
        jfpath:'',
    }
    //VUE内容实现
    var vue = new Vue({
        el: '#app',
        data: data,
        //初始加载
        created() {
          
        },
        methods: {
       	   //获取路径的方法
       	    handleGetPath(data) {
       		  this.type = data;
       		  console.log(data);
       		  var _this = this;
       		  //ajax调用方法
   		      axios.post(`${api.file}/fileList/`,{
   		    	files : _this.filePath
   		      })
              .then(function (res) {
                  if (res.data.code == 10010) {
                	  _this.fileList = res.data.dataList;
                  } else {
                      Vue.prototype.$message({
                          type: 'error',
                          message: res.data.msg
                      });
                  }
                })
                .catch(function (error) {
                    Vue.prototype.$message({
                        type: 'error',
                        message: "获取路径失败"
                    });
                });
       		  
       	      this.routeDialogVisible = true;
       	    },
       	    //关闭窗口
       	    closeGetPath() {
       	      this.fileList = {};
       	      this.filePath ='请选择文件所在路径';
       	      this.routeDialogVisible = false;
       	    },
       	    //确定按钮
       	    confirmRoute() {
       	    	var _this = this;
       	    	if(this.type == "待测数据"){
       	    		_this.dfpath = _this.filePath;
       	    	}else{
       	    		_this.jfpath = _this.filePath;
       	    	}
       	      this.fileList = {};
         	  this.filePath ='请选择文件所在路径';	
       	      this.routeDialogVisible = false;
       	    },
       	 //点击进入文件列表
       	    clickData(fileName) {
       	    	var _this = this;
       	    	if(this.filePath == '请选择文件所在路径'){
       	    		_this.filePath = fileName+"\\";
       	    	}else{
       	    		_this.filePath = this.filePath+"\\"+fileName;
       	    	}
       	   //ajax调用方法
     		      axios.post(`${api.file}/fileList/`,{
     		    	 files : _this.filePath
     		      })
                .then(function (res) {
                    if (res.data.code == 10010) {
                  	  _this.fileList = res.data.dataList;
                    } else {
                        Vue.prototype.$message({
                            type: 'error',
                            message: res.data.msg
                        });
                    }
                  })
                  .catch(function (error) {
                      Vue.prototype.$message({
                          type: 'error',
                          message: "获取路径失败"
                      });
                  });
       	    	
       	    },
       	    //向上一级
       	    backRoute() {
       	    	       	 	var _this = this;
	   	    	if(this.filePath == '请选择文件所在路径'){
	   	    	  Vue.prototype.$message({
                      type: 'error',
                      message: "未选择路径"
                  });
	   	    	}else{
	   	    		if(_this.filePath.length <=3){
	   	    			_this.filePath = '请选择文件所在路径';
	   	    		}else{
	   	    			_this.filePath = _this.filePath.substring(0,_this.filePath.lastIndexOf("\\"));	
	   	    		}
	   	    		
	   	    	}
	   	   //ajax调用方法
	 		      axios.post(`${api.file}/fileList/`,{
	 		    	 files : _this.filePath
	 		      })
	            .then(function (res) {
	                if (res.data.code == 10010) {
	              	  _this.fileList = res.data.dataList;
	                } else {
	                    Vue.prototype.$message({
	                        type: 'error',
	                        message: res.data.msg
	                    });
	                }
	              })
	              .catch(function (error) {
	                  Vue.prototype.$message({
	                      type: 'error',
	                      message: "获取路径失败"
	                  });
	              });
       	    },
        }
    })
</script>

</html>

这里只给出api.js 代码 其他需要的js 文件需要自己查找下载/或者下载附件获取

附件地址

api.js
//本地测试统一接口  如果该地址不可用，请在本地改为  http://ip:端口/项目名/
const host ='../';
//引用名称
const api = {
    'file': host + 'file',//获取文件目录
}

Java 代码

import java.io.File;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import javax.swing.filechooser.FileSystemView;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.context.request.async.DeferredResult;

import com.ccit.java.utils.ResultRtn;
import com.ccit.java.utils.StatusCode;

@RequestMapping("/file")
@RestController
public class fileList {
	
	    @PostMapping("/fileList/")
	    public DeferredResult<ResultRtn> fileList(@RequestBody Map<String, String> map){
	    DeferredResult<ResultRtn> result = new DeferredResult<ResultRtn>();
	    List<String> fileName = new ArrayList<String>();
	    String files = map.get("files");
	    if(files.equals("请选择文件所在路径")) {
	    	//获取所有盘符
			FileSystemView fsv = FileSystemView.getFileSystemView();
			File[] fs = File.listRoots();
			for (int i = 0; i < fs.length; i++) {
				String name = fsv.getSystemDisplayName(fs[i]).toString();
				if(!name.isEmpty()) {
					int begin = name.lastIndexOf("(");
					int end = name.lastIndexOf(")");
					name = name.substring(begin+1, end);
					fileName.add(name);
					System.err.println(name);
				}
			}
			result.setResult(ResultRtn.of(StatusCode.SUCCESS.code, StatusCode.SUCCESS.msg, fileName));
	    }else {
	    	//获取指定目录下一级的所有文件夹
			String dirName= files;
			File file = new File(dirName);
			if(file.isDirectory()) {
				System.out.println("正在读取"+dirName+"目录....");
				String[] list = file.list();
				for(int i=0;i<list.length;i++) {
					File file2 = new File(dirName+"\\"+list[i]);
					if(file2.isDirectory()) {
						fileName.add(list[i]);
						System.out.println("文件夹："+list[i]);
					}
				}
				result.setResult(ResultRtn.of(StatusCode.SUCCESS.code, StatusCode.SUCCESS.msg, fileName));
			}else {
				System.out.println(dirName+"不是一个目录。");
				  result.setResult(ResultRtn.of(StatusCode.NULL_RESULT.code, dirName+"不是一个目录。"));
			}
	    }
		return result;
	}

}

返回值实体类 自行解决一下

Heart&Fire
关注
  • 5
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
选择目录和选择文件对话框
10-10
选择目录 选择文件 对话框 vs2010 具体描述在blog： http://blog.csdn.net/cau_eric/article/details/12570815
vue 选择本地文件目录
热门推荐
yxs646512415的博客
10-15 3万+
vue 选择本地文件目录先看效果原码片断 通过的vue结合原生的input 进行本地文件系统目录的选择 先看效果 传统的文件处理会有一些文件上传相关的插件，但有时候会有一些需求是不能简单选择一个文件上传就能解决的，如果要本地文件目录中的文件进行相关的逻辑处理，就比较麻烦，然后我做了本地一个文件目录选择的例子，只要得到目录地址，后面想怎么操作就看大家发挥了, 先看代码： 注解： 1处这里是一个普通的html 按钮，值得注意的是这里需要多加一个 webkitdirectory 参数，表示文件夹选择器。
vue+elementui项目总结
荔枝吖阿
06-09 2628
1.为了方便项目的维护，将所有的接口都封装到一个文件中,在view下新建个api文件夹，包含http.js（封装请求）api.js（封装各个接口） http.js import axios from 'axios' axios.defaults.baseURL =''; const http = axios.create({ timeout: 300 * 1000, headers: { 'Cache-Control': 'no-cache' } }); //http request 拦截
解决vue3前端获取文件的绝对路径问题
Stars_in_rain的博客
08-15 5405
项目已经使用electron进行了打包，所以是可以通过electron方式运行的，现在需要的就是vue的代码中引入electron，进行打开文件管理器，实现文件路径获取。这时候又出现 window.require is not a function .错误，这是因为工程是在本地浏览器运行的，识别不了electron中的api,只要保证在electron应用程序下运行就不会报错。(3)、electron5.x的node集成环境默认是关闭的，这之前的版本是默认开启的。在需要通信的文件中进行调用。
element ui 上传文件组件，可以选中文件夹并上传文件夹内所有文件
weixin_45264424的博客
09-29 5039
<template> <el-upload class="upload-demo" action="#" :on-remove="fileRemoveHandle4" :on-change="fileChangeHandle4" accept="" :auto-upload="false" multiple
koa + element-ui 实现文件上传并返回文件地址
jsjcmq的博客
09-22 1158
技术栈 后端：koa、koa-router、koa-multer、koa-static 前端：vue、element-ui 前端代码片段 <template> <div> <!-- element-ui 上传组件，action为接口地址 --> <el-upload class="upload" action="/api/upload" :on-success="handleUploadSuccess"
vue把elementUi的输入框当做文件选择框使用，使用技巧
07-24 1195
其实刚开始，我是想使用元素获取焦点事件，然后通过处理这个焦点事件，打开对话框，然后选择文件，但是这里有个问题，就是选择完文件之后，这个元素还是获取焦点，然后就会继续打开对话框，无限循环........，即便你通过e.target.blur() 让输入框失去了焦点，但是因为这是ui框架包装的输入框，所以还是会继续获取焦点，所以这个方案废弃。然后我就在想，既然这个输入框不能使用click事件，那给它包一个元素，在外层元素上绑定点击事件，然后通过事件冒泡来实现呢？嗯，经过我的不懈努力，这个方案不错。
vue+elementUi+el-upload实现上传、获取本机服务器路径、URL、document、createObjectURL、getElementsByClassName
“代码农”微信公众号
05-07 1万+
vue+elementUi+el-upload实现上传、获取本机服务器路径、URL、document、createObjectURL、getElementsByClassName
带有输入框的选取文件按钮，输入框中显示选取文件的路径
qq_22972401的博客
07-06 970
element ui组件中所提供的选取文件，上传文件，显示的文件路径是以列表的形式显示在按钮下方，通常不能满足需求，会需要有一个文本框之类的显示路径在按钮前 效果如下：
使用electron-vue获取文件夹的路径
weixin_53294082的博客
08-16 3102
记录一次开发过程中遇到的bug，我们的项目中需要将vue项目打包为桌面应用软件，为此我们引入了electron框架，在这个过程中，我们需要获取到用户电脑上面文件夹的绝对路径，用这篇文章记录一下
vue+elementui+tinymce
03-27
vue2+elementUI引入tinymce组件，富文本组件。tinymce文件夹放在public下，在使用页面引入组件即可。弹窗二次打开无法获取焦点问题，在标签加v-if，让富文本组件在弹窗关闭时销毁（原因由于el-dialog弹窗销毁为key自增，实际富文本未被销毁，再次打开造成影响。可重写弹窗销毁策略。简单方法就添加v-if）
基于vue+elementui+nodejs+mysql实现的仓库管理系统源码.zip
07-05
【资源介绍】 基于vue+elementui+nodejs+mysql实现的仓库管理系统源码.zip 该项目是个人毕设项目，答辩评审分达到95分，代码都经过调试测试，确保可以运行！欢迎下载使用，可用于小白学习、进阶。 该资源主要针对计算机、通信、自动化等相关专业的学生、老师或从业者下载使用，亦可作为期末课程设计、课程大作业、毕业设计等。 项目整体具有较高的学习借鉴价值！基础能力强的可以在此基础上修改调整，以实现不同的功能。 基于vue+elementui+nodejs+mysql实现的仓库管理系统源码.zip 基于vue+elementui+nodejs+mysql实现的仓库管理系统源码.zip 基于vue+elementui+nodejs+mysql实现的仓库管理系统源码.zip
基于Vue+ElementUI+Springboot前后端分离网约车预约系统java源码+数据库文件.zip
最新发布
01-11
基于Vue+ElementUI+Springboot前后端分离网约车预约系统java源码+数据库文件.zip 该项目是个人大作业项目源码，评审分达到95分以上，都经过严格调试，确保可以运行！放心下载使用。 基于Vue+ElementUI+Springboot前后端分离网约车预约系统java源码+数据库文件.zip 该项目是个人大作业项目源码，评审分达到95分以上，都经过严格调试，确保可以运行！放心下载使用。 基于Vue+ElementUI+Springboot前后端分离网约车预约系统java源码+数据库文件.zip 该项目是个人大作业项目源码，评审分达到95分以上，都经过严格调试，确保可以运行！放心下载使用。 基于Vue+ElementUI+Springboot前后端分离网约车预约系统java源码+数据库文件.zip 该项目是个人大作业项目源码，评审分达到95分以上，都经过严格调试，确保可以运行！放心下载使用。 基于Vue+ElementUI+Springboot前后端分离网约车预约系统java源码+数据库文件.zip 该项目是个人大作业项目源码，评审
使用springboot+mybatis+Vue2.0+elementUI实现简单的登录注册及用户信息获取。
07-09
本demo适合刚入门学习SpringBoot及Vue的小伙伴，要求有SSM基础，较熟悉web应用三层架构，且对前端的html\css\js有一定的基础，会写ajax等基础的前后端交互请求。 本demo实现了简单的登录、注册、获取用户信息三个功能，其中包含密码加密，解决了前后端分离项目常见的跨域问题及session问题，界面清晰简单，后台分层清晰，逻辑清楚。 值得一看。 项目结构：ajax_test为后端项目，ajax_t为前端项目，同时在idea启动即可，另外sql文件数据库表sql，温馨提醒：记得在yml中修改数据库配置哦！ 阅读建议：安装好Vue及相关的elementUI、axios等环境，会使用vueCli及springboot初始化项目，能将项目跑起来，直接看到效果。 有问题随时私信联系哦！一起交流。
Java项目:企业人事系统(java+SpringBoot+Vue+ElementUI+maven+mysql)
05-26
项目基于MVVM的前后端分离开发模式进行开发.MVVM即模型(Model)-视图(View)-视图模型(View Model),实现了数据视图的双向绑定.相对于MVC模式和MVP来说,MVVM是一个比较新的开发架构,它是一种将MVP模式与WPF相结合应用...
在使用el-upload时，获得选取文件的本地路径
qq_42122531的博客
07-20 2万+
网上各种文章看过后貌似都没有发现，通过el-upload如何获取本地文件路径的方法 1、百思不得其解后,让我回想起了原生input框是如何调本地文件获取路径 <inputtype="file"id="file"> console.log(document.getElementById("file").value) 2、同理，el-uplo...
element 上传 点击后直接调起文件选择
xiaoheisboy的博客
04-07 1750
element el-upload 上传 点击后直接调起文件选择 (或上传) 成品展示 1.未点击时（默认情况，点击红框直接调起文件选择：下图） 2.点击时 （红框被点击，调起文件选择） 3.如果符合你的需求看代码👇 代码 html部分 <div style="width: 270px;height: 150px;overflow: hidden"> <el-upload action="string" :au
使用 element ui 上传文件图片的方法 和 后台要如何获取并保c存到对应文件夹中
weixin_50582284的博客
09-14 6094
第一次使element ui上传图片归纳一下笔记，适合小白学习。网上刚开始找了很多，但是都是一堆屁话。 都是element ui 的使用 没有写后太怎么保存获取的。经过一顿操作之后。有了一定的了解。毕竟也是第一次使用element ui 上传图片。
Vue + ElementUI + Websockets 实现 消息通知
05-20
实现消息通知，可以借助Vue、ElementUI和Websockets，以下是基本的实现步骤： 1. 安装Vue和ElementUI 使用命令行工具，进入项目目录，执行以下命令： ``` npm install vue npm install element-ui ``` 2. 引入ElementUI组件 在Vue的入口文件中，引入需要使用的ElementUI组件，例如Notification、MessageBox等。 ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 创建WebSocket连接 在Vue组件中通过Websockets连接后端服务器，建立WebSocket连接，接收服务器推送的消息。 ``` // 建立WebSocket连接 const webSocket = new WebSocket('ws://localhost:8080') // 监听WebSocket连接打开事件 webSocket.onopen = function () { console.log('WebSocket连接已打开') } // 监听WebSocket接收到消息事件 webSocket.onmessage = function (event) { console.log('WebSocket接收到消息：' + event.data) // 处理接收到的消息 } // 监听WebSocket连接关闭事件 webSocket.onclose = function () { console.log('WebSocket连接已关闭') } ``` 4. 处理接收到的消息 在WebSocket监听到有消息时，可以使用ElementUI的Notification组件弹出通知框，提醒用户有新消息。 ``` // 处理WebSocket接收到的消息 webSocket.onmessage = function (event) { console.log('WebSocket接收到消息：' + event.data) // 弹出通知框 const msg = JSON.parse(event.data) Notification({ title: '新消息', message: msg.content }) // 弹出确认框 MessageBox.confirm(msg.content, '新消息', { confirmButtonText: '查看详情', cancelButtonText: '忽略', type: 'info' }).then(() => { // 用户点击了查看详情按钮 // 处理跳转逻辑 }).catch(() => { // 用户点击了忽略按钮 // 不做任何处理 }) } ``` 以上就是使用Vue、ElementUI和Websockets实现消息通知的基本步骤。需要注意的是，WebSocket连接的建立和关闭需要在组件的mounted和beforeDestroy生命周期函数中分别进行。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Heart&Fire

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值