Vue项目如何获取本地文件夹绝对路径
作者:非尔山尔
这篇文章主要介绍了Vue项目如何获取本地文件夹绝对路径问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
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; }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。