Vue項目如何獲取本地文件夾絕對路徑
更新時間：2023年01月20日 11:15:40 作者：非爾山爾
這篇文章主要介紹了Vue項目如何獲取本地文件夾絕對路徑問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue項目，實現(xiàn)獲取本地的絕對文件夾路徑的解決方案
一、前端代碼
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> <!-- 內(nèi)容底部區(qū)域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="closeGetPath()">取 消</el-button>
<el-button type="primary" @click="confirmRoute()">確 定</el-button>
</span>
</el-dialog>
2.導(dǎo)入方法（不要忘記了導(dǎo)入方法和data定義）
import { getMiddlePath } from "@/api/config";
3.方法區(qū)代碼
//獲取路徑的方法
handleGetPath(path) {
this.routeDialogVisible = true;
},
//關(guān)閉窗口
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;
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue中修改了數(shù)據(jù)但視圖無法更新的情況
今天小編就為大家分享一篇解決vue中修改了數(shù)據(jù)但視圖無法更新的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了webstorm添加*.vue文件支持，webstorm很多的插件內(nèi)置，不用安裝插件，下面嘗試用vue和es6做項目，有興趣的可以了解一下2018-05-05
Vue Elenent實現(xiàn)表格相同數(shù)據(jù)列合并
這篇文章主要為大家詳細介紹了Vue Elenent實現(xiàn)表格相同數(shù)據(jù)列合并，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。這篇文章給大家介紹了vue組件的使用，需要的朋友參考下吧2018-01-01
這篇文章主要介紹了vue-cli項目中遇到的eslint的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于如何用Vue3切換中英文顯示的相關(guān)資料,在Vue3中使用vue-i18n進行國際化設(shè)置,包括安裝、配置、在組件中使用$t方法獲取翻譯字符串,以及可選的動態(tài)加載語言包以提高性能,需要的朋友可以參考下2024-11-11
如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲
SQLite是一種嵌入式關(guān)系型數(shù)據(jù)庫管理系統(tǒng),是一個零配置、無服務(wù)器的、自給自足的、事務(wù)性的SQL數(shù)據(jù)庫引擎,這篇文章主要給大家介紹了關(guān)于如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲的相關(guān)資料,需要的朋友可以參考下2024-03-03
本文主要介紹了Vue實現(xiàn)組件間通信的幾種方式，不同的場景使用不同的方式，基本滿足所有開發(fā)場景中的通信需求，感興趣的可以了解一下2021-10-10
element-plus+Vue3實現(xiàn)表格數(shù)據(jù)動態(tài)渲染
在Vue中,el-table是element-ui提供的強大表格組件,可以用于展示靜態(tài)和動態(tài)表格數(shù)據(jù),本文主要介紹了element-plus+Vue3實現(xiàn)表格數(shù)據(jù)動態(tài)渲染,感興趣的可以了解一下2024-03-03
vue2+elementUI的el-tree的選中、高亮、定位功能的實現(xiàn)
這篇文章主要介紹了vue2+elementUI的el-tree的選中、高亮、定位功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09