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

目录

• 一、前端代码
• 1.弹框样式代码
• 2.导入方法（不要忘记了导入方法和data定义）
• 3.方法区代码
• 4.api接口中的config.js代码
• 二、后端代码
• controller层代码
• service接口interface
• service层代码impl
• 总结

Vue项目，实现获取本地的绝对文件夹路径的解决方案

一、前端代码

vue项目下的index中代码如下

1.弹框样式代码

 
      
        
          
          
           向上
        
        
          
             
          
        
            
      
        取 消
        确 定
      
    

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 fileList(@RequestBody BaseListReq req) {
        return configService.fileList(req);
    }

service接口interface

ListRes fileList(BaseListReq req);

service层代码impl

@Override
    public ListRes fileList(BaseListReq req) {
        String path = req.getOrderKey();
        List 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 res = new ListRes<>(ResponseEnum.SUCCESS);
        res.setList(list);
        return res;
    }

总结

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