Vue项目如何获取本地文件夹绝对路径

 更新时间:2023年01月20日 11:15:40   作者:非尔山尔  
这篇文章主要介绍了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;
    }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决vue中修改了数据但视图无法更新的情况

    解决vue中修改了数据但视图无法更新的情况

    今天小编就为大家分享一篇解决vue中修改了数据但视图无法更新的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • webstorm添加*.vue文件支持

    webstorm添加*.vue文件支持

    这篇文章主要介绍了webstorm添加*.vue文件支持,webstorm很多的插件内置,不用安装插件,下面尝试用vue和es6做项目,有兴趣的可以了解一下
    2018-05-05
  • Vue Elenent实现表格相同数据列合并

    Vue Elenent实现表格相同数据列合并

    这篇文章主要为大家详细介绍了Vue Elenent实现表格相同数据列合并,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • Vue组件的使用教程详解

    Vue组件的使用教程详解

    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章给大家介绍了vue组件的使用,需要的朋友参考下吧
    2018-01-01
  • vue-cli项目中遇到的eslint的坑及解决

    vue-cli项目中遇到的eslint的坑及解决

    这篇文章主要介绍了vue-cli项目中遇到的eslint的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 如何用Vue3切换中英文显示举例说明

    如何用Vue3切换中英文显示举例说明

    这篇文章主要给大家介绍了关于如何用Vue3切换中英文显示的相关资料,在Vue3中使用vue-i18n进行国际化设置,包括安装、配置、在组件中使用$t方法获取翻译字符串,以及可选的动态加载语言包以提高性能,需要的朋友可以参考下
    2024-11-11
  • 如何在Vue3和Vite项目中用SQLite数据库进行数据存储

    如何在Vue3和Vite项目中用SQLite数据库进行数据存储

    SQLite是一种嵌入式关系型数据库管理系统,是一个零配置、无服务器的、自给自足的、事务性的SQL数据库引擎,这篇文章主要给大家介绍了关于如何在Vue3和Vite项目中用SQLite数据库进行数据存储的相关资料,需要的朋友可以参考下
    2024-03-03
  • Vue实现组件间通信的几种方式(多种场景)

    Vue实现组件间通信的几种方式(多种场景)

    本文主要介绍了Vue实现组件间通信的几种方式,不同的场景使用不同的方式,基本满足所有开发场景中的通信需求,感兴趣的可以了解一下
    2021-10-10
  • element-plus+Vue3实现表格数据动态渲染

    element-plus+Vue3实现表格数据动态渲染

    在Vue中,el-table是element-ui提供的强大表格组件,可以用于展示静态和动态表格数据,本文主要介绍了element-plus+Vue3实现表格数据动态渲染,感兴趣的可以了解一下
    2024-03-03
  • vue2+elementUI的el-tree的选中、高亮、定位功能的实现

    vue2+elementUI的el-tree的选中、高亮、定位功能的实现

    这篇文章主要介绍了vue2+elementUI的el-tree的选中、高亮、定位功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09

最新评论