React限制文件选择输入至指定目录的技术方案问询

三个设想方案的可行性判断： #

1. 限制原生文件输入仅显示BASE_DIR下的文件夹：不可行。浏览器出于安全机制，完全不允许前端指定或限制文件选择器的访问范围，原生input[type="file"]无法实现此需求。
2. 获取文件真实完整路径：完全不可行。浏览器会刻意隐藏本地文件的真实路径，所有返回的路径均为伪路径（如C:\fakepath\...），前端无法突破此安全限制。
3. 自定义目录树选择器：可行，且是最优雅的解决方案，下面给出具体实现思路和代码示例。

推荐方案：自定义目录树选择器 #

核心思路是由后端暴露BASE_DIR下的合法目录结构，前端渲染可折叠目录树供用户选择，最终传递相对BASE_DIR的路径给后端，后端拼接后得到安全的完整路径。

步骤1：后端Flask接口（提供目录结构）

编写接口递归遍历BASE_DIR下的目录，返回结构化的目录树（注意过滤隐藏目录和敏感内容）：

import os
from flask import Flask, jsonify

app = Flask(__name__)
BASE_DIR = "/path/to/your/target/base-directory"

def build_dir_tree(root):
    dir_tree = []
    for entry in os.scandir(root):
        if entry.is_dir() and not entry.name.startswith('.'):  # 过滤隐藏目录
            child_nodes = build_dir_tree(entry.path)
            dir_tree.append({
                "name": entry.name,
                "relative_path": os.path.relpath(entry.path, BASE_DIR),
                "children": child_nodes
            })
    return dir_tree

@app.route('/api/get-dir-tree')
def get_directory_tree():
    try:
        tree_data = build_dir_tree(BASE_DIR)
        return jsonify(tree_data)
    except Exception as e:
        return jsonify({"error": str(e)}), 500

步骤2：React前端实现目录树选择器

可以用现成的UI库（如@mui/x-tree-view）快速实现可折叠目录树：

import { useState, useEffect } from 'react';
import { TreeView, TreeItem } from '@mui/x-tree-view';
import { ExpandMore, ChevronRight } from '@mui/icons-material';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';

const CustomFolderSelector = () => {
  const [dirTree, setDirTree] = useState([]);
  const [selectedRelativePath, setSelectedRelativePath] = useState('');

  // 从后端拉取目录结构
  useEffect(() => {
    fetch('/api/get-dir-tree')
      .then(res => res.json())
      .then(data => setDirTree(data))
      .catch(err => console.error('加载目录结构失败:', err));
  }, []);

  // 递归渲染目录树节点
  const renderTreeNodes = (nodes) => {
    return nodes.map(node => (
      <TreeItem
        key={node.relative_path}
        nodeId={node.relative_path}
        label={node.name}
        onClick={() => setSelectedRelativePath(node.relative_path)}
      >
        {node.children.length > 0 && renderTreeNodes(node.children)}
      </TreeItem>
    ));
  };

  // 提交选中的路径到后端
  const handleSubmit = () => {
    if (!selectedRelativePath) return;
    fetch('/api/process-folder', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ relative_path: selectedRelativePath })
    })
    .then(res => res.json())
    .then(result => console.log('处理结果:', result))
    .catch(err => console.error('处理失败:', err));
  };

  return (
    <Box sx={{ width: '100%', maxWidth: 600, mx: 'auto', mt: 4 }}>
      <TreeView
        defaultCollapseIcon={<ExpandMore />}
        defaultExpandIcon={<ChevronRight />}
        sx={{ height: 400, border: 1, borderColor: 'divider', overflowY: 'auto' }}
      >
        {renderTreeNodes(dirTree)}
      </TreeView>
      <Button
        variant="contained"
        onClick={handleSubmit}
        disabled={!selectedRelativePath}
        sx={{ mt: 2, width: '100%' }}
      >
        确认选择文件夹
      </Button>
    </Box>
  );
};

export default CustomFolderSelector;

步骤3：后端安全校验与路径拼接

后端接收相对路径后，必须先校验路径合法性，再拼接成完整路径：

from flask import request

@app.route('/api/process-folder', methods=['POST'])
def process_folder():
    data = request.get_json()
    relative_path = data.get('relative_path')
    if not relative_path:
        return jsonify({"error": "未选择文件夹"}), 400
    
    # 拼接完整路径
    full_path = os.path.abspath(os.path.join(BASE_DIR, relative_path))
    
    # 安全校验：确保完整路径在BASE_DIR内部，防止目录遍历攻击
    if not full_path.startswith(os.path.abspath(BASE_DIR)):
        return jsonify({"error": "非法路径"}), 403
    
    # 调用外部脚本处理文件
    # ... 你的业务逻辑 ...
    return jsonify({"success": True, "full_path": full_path})

替代方案：优化现有后端逻辑（快速过渡） #

如果暂时不想实现自定义目录树，可以优化现有流程：

1. 前端仍用原生文件夹选择，将选中的文件夹名称传递给后端
2. 后端在BASE_DIR下递归查找匹配的文件夹（注意：BASE_DIR过大时性能较差）
3. 找到匹配路径后执行安全校验，再调用外部脚本

但此方案可靠性较低（可能存在同名文件夹），仅适合临时过渡使用。

内容的提问来源于stack exchange，提问作者Eshita Shukla