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;
},
//點擊進(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);
});
},
//向上一級
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.js中引入圖片路徑的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
今天小編就為大家分享一篇解決vue attr取不到屬性值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue2和elementUI?實現(xiàn)落日余暉登錄頁和滑塊校驗功能
這篇文章主要介紹了vue2和elementUI打造落日余暉登錄頁和滑塊校驗,本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)通訊錄功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了vue如何實現(xiàn)無縫輪播圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue嵌套組件傳參實例分享,本文以一個vue遞歸組件為例,探究多層嵌套后事件無法觸發(fā)的問題,我們可以通過查看一Demo,便于快速了解,下文列舉例子需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了Vue?如何關(guān)掉響應(yīng)式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue項目表單校驗的相關(guān)資料,前端表單校驗?zāi)軠p少無效請求,保護(hù)后端接口,使用ElementPlus表單組件進(jìn)行校驗,需要準(zhǔn)備表單對象、規(guī)則對象并進(jìn)行雙向綁定,用戶名、密碼以及協(xié)議勾選等字段都需符合特定規(guī)則,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了Vue組件通信方法案例總結(jié),本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js?的過濾器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02