实现获取本地文件夹路径,不支持文件获取,文件上穿
选择文件夹得弹框效果
前端代码
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/element-index.css">
<script src="../config/api.js"></script>
<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:'',
}
var vue = new Vue({
el: '#app',
data: data,
created() {
},
methods: {
handleGetPath(data) {
this.type = data;
console.log(data);
var _this = this;
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;
}
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("\\"));
}
}
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;
}
}
返回值实体类 自行解决一下