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

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;
    }