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

选择文件夹得弹框效果

前端代码

<!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;}}

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

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

js获取本地文件夹和文件 .
一.功能实现核心:FileSystemObject 对象要在javascript中实现文件操作功能,主要就是依靠FileSystemobject对象. 二.FileSystemObject编程使用 ...
java怎么获取服务器文件夹,java获取远程服务器的文件夹
java获取远程服务器的文件夹内容精选换一换工具中所有涉及上传文件功能的,如果需要上传的文件大于1GB或者解压后超过剩余磁盘空间的一半,则需要释放磁盘空间或手动将文件上传至服务器,其他情况可通过 ...
JS 如何动态获取本地文件夹中的所有图片
1.require.context 最近在帮师哥做一个简单的数据和图片展示的项目,其中有一个需求是要在页面上显示出该项目某一文件夹下的所有图片,图片的数目和文件名不确定,只知道图片存放的目录. 一开始 ...
js如何打开本地html文件,html、js获取本地文件夹路径，打开本地应用程序
方法1: function runExecutable() { var executableFullPath=document.getElementById("path").val ...
vue获取本地文件夹内所有图片
<script> const path = require("path"); //读取文件的路径是否遍历文件的子目录匹配文件正则表达式 const files = ...
java+js实现展示本地文件夹下的所有图片demo
java+js实现展示本地文件夹下的所有图片demo 最近项目遇到需要实现前端通过一个按钮点击事件,弹窗浏览本地文件夹下的所有图片: 思路: - 获取到所需展示图片的本地文件夹内所有图片的文件绝对 ...
java 读取手机文件_Android获取手机文件夹及文件列表的方法
先看看效果图: package wuwang.tools.utils; import java.io.File; import java.io.FileInputStream; import java ...
Java抓取起点小说输出到本地文件夹和数据库
Java抓取起点小说输出到本地文件夹和数据库目录项目结构所需插件项目代码输出结果目录项目结构第一次写网络爬虫,参考了别人的,也自己理解了用法所需插件因为使用了mevan,直接上po ...
java+js实现展示本地文件夹下的所有图片demo[申明：来源于网络]
java+js实现展示本地文件夹下的所有图片demo[申明:来源于网络] 地址:http://blog.csdn.net/allgis/article/details/46364875 转载于:htt ...

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

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

选择文件夹得弹框效果

前端代码

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

api.js

Java 代码

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

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

最新文章

热门文章

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

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

选择文件夹得弹框效果

前端代码

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

api.js

Java 代码

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

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

最新文章

热门文章

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

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