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

目录

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

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

service接口interface

ListResFileInfo>
     fileList(BaseListReq req);
    

service层代码impl

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

总结

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

• 解决vue-cli 配置资源引用的绝对路径问题
• vue 如何实现配置@绝对路径
• vue cli使用绝对路径引用图片问题的解决

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！