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;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
