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