Vue项目获取本地文件夹绝对路径
Vue项目,实现获取本地的绝对文件夹路径的解决方案一、前端代码vue项目下的index中代码如下1、弹框样式代码<el-dialogtitle="":append-to-body="true":visible.sync="routeDialogVisible"width="600px":close-on-click-modal="false"><el-form :model="r
·
Vue项目,实现获取本地的绝对文件夹路径的解决方案
一、前端代码
vue项目下的index中代码如下
1、弹框样式代码
<el-dialog
title=""
:append-to-body="true"
:visible.sync="routeDialogVisible"
width="600px"
:close-on-click-modal="false"
>
<el-form :model="routeDialog">
<el-form-item label="" prop="path">
<el-input style="width:450px; padding-left:20px" size="mini" v-model="routeDialog.path">
</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">
<el-table
:data="tableData"
stripe
highlight-current-row
style="width:520px; margin-left:15px"
@row-click="clickData"
>
<el-table-column prop="name" label="名称"> </el-table-column>
</el-table>
</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>
2、导入方法(不要忘记了导入方法和data定义)
import { getMiddlePath } from "@/api/config";
3、方法区代码
//获取路径的方法
handleGetPath(path) {
this.routeDialogVisible = true;
},
//关闭窗口
closeGetPath() {
this.routeDialogVisible = false;
},
//确定按钮
confirmRoute() {
this.settingForm.resultPath = this.routeDialog.path;
this.routeDialogVisible = false;
},
//点击进入文件列表
clickData(row, event) {
console.log(row);
getMiddlePath({ orderKey: row.path }).then(response => {
this.tableData = response.data.list;
this.routeDialog = row;
console.log(this.routeDialog);
});
},
//向上一级
backRoute() {
if (this.routeDialog.path.endsWith("\\")) {
var len = this.routeDialog.path.lastIndexOf("\\");
var sub = this.routeDialog.path.substring(0, len);
getMiddlePath({}).then(response => {
this.tableData = response.data.list;
});
} else {
var len = this.routeDialog.path.lastIndexOf("\\");
if (len == 2) {
var sub = this.routeDialog.path.substring(0, len);
getMiddlePath({ orderKey: sub + "\\" }).then(response => {
this.tableData = response.data.list;
this.routeDialog.path = sub + "\\";
});
} else {
var sub = this.routeDialog.path.substring(0, len);
console.log(sub);
this.routeDialog.path = sub;
getMiddlePath({ orderKey: sub }).then(response => {
this.tableData = response.data.list;
});
}
}
},
4、api接口中的config.js代码
export function getMiddlePath(data) {
return request({
url: '/config/fileList',
method: 'post',
data
})
}
二、后端代码
controller层代码
@PostMapping("fileList")
@NoLogin
@ResponseBody
public ListRes<FileInfo> fileList(@RequestBody BaseListReq req) {
return configService.fileList(req);
}
service接口interface
ListRes<FileInfo> fileList(BaseListReq req);
service层代码impl
@Override
public ListRes<FileInfo> fileList(BaseListReq req) {
String path = req.getOrderKey();
List<FileInfo> list;
if (StringUtils.isNullOrEmpty(path) || ROOT_PATH.equals(path)) {
File[] subFiles = File.listRoots();
list = new ArrayList<>(subFiles.length);
for (File subFile : subFiles) {
FileInfo fileInfo = new FileInfo(subFile);
list.add(fileInfo);
}
} else {
File folder = new File(path);
if (!folder.exists()) {
return new ListRes<>(ResponseEnum.FILE_NOT_EXIST);
}
if (!folder.isDirectory()) {
return new ListRes<>(ResponseEnum.PARAM_ERROR);
}
File[] subFiles = folder.listFiles();
if (subFiles == null) {
return new ListRes<>(ResponseEnum.PARAM_ERROR);
}
list = new ArrayList<>(subFiles.length);
for (File subFile : subFiles) {
if (subFile.isDirectory()) {
FileInfo fileInfo = new FileInfo(subFile);
list.add(fileInfo);
}
}
}
ListRes<FileInfo> res = new ListRes<>(ResponseEnum.SUCCESS);
res.setList(list);
return res;
}
更多推荐
已为社区贡献1条内容
所有评论(0)