如何使用Flask与WTForms实现文件夹目录上传

要实现包含子文件夹的完整目录上传，需要同时修改前端表单和后端处理逻辑，以下是调整后的完整代码：

1. 前端HTML模板（templates/index.html） #

修改文件选择控件，使其支持文件夹选择：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件夹上传</title>
</head>
<body>
    <h1>Flask 文件夹上传</h1>

    <form method='POST' enctype='multipart/form-data'>
        {{ form.hidden_tag() }}
        {{ form.file(class="file-input", directory="", webkitdirectory="") }}
        {{ form.submit() }}
    </form>
</body>
</html>

关键修改：给file字段添加directory和webkitdirectory属性，让浏览器允许用户选择整个文件夹。

2. Flask后端代码 #

更新后端逻辑，处理文件夹的层级结构，自动创建子目录并保存文件：

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms import FileField, SubmitField
from wtforms.validators import InputRequired
from werkzeug.utils import secure_filename
import os

app = Flask(__name__)
app.config['SECRET_KEY'] = 'supersecretkey'
app.config['UPLOAD_FOLDER'] = 'static/uploaded_folders'

# 确保上传目录存在
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)

class UploadFolderForm(FlaskForm):
    file = FileField("选择文件夹", validators=[InputRequired()])
    submit = SubmitField("上传文件夹")

@app.route('/', methods=['GET', "POST"])
@app.route('/home', methods=['GET', "POST"])
def home():
    form = UploadFolderForm()
    if form.validate_on_submit():
        # 获取所有上传的文件（包含子文件夹内的文件）
        for uploaded_file in request.files.getlist('file'):
            # 获取文件在原文件夹中的相对路径
            relative_path = secure_filename(uploaded_file.filename)
            # 拼接目标保存路径
            target_path = os.path.join(app.config['UPLOAD_FOLDER'], relative_path)
            # 创建对应的子目录（如果不存在）
            os.makedirs(os.path.dirname(target_path), exist_ok=True)
            # 保存文件
            uploaded_file.save(target_path)
        return "文件夹上传完成，包含所有子目录和文件"
    return render_template('index.html', form=form)

if __name__ == '__main__':
    app.run(debug=True)

关键说明 #

• 前端属性：directory和webkitdirectory是浏览器原生支持的属性，用于触发文件夹选择对话框，webkitdirectory适配Chrome、Edge等webkit内核浏览器，directory为标准属性。
• 相对路径处理：选择文件夹上传时，每个文件的filename会包含其在原文件夹中的相对路径（如subfolder/file.txt），后端通过该路径创建对应子目录。
• 目录创建：使用os.makedirs(..., exist_ok=True)确保保存文件前，目标子目录已存在，避免报错。
• 安全处理：通过secure_filename()处理路径和文件名，防范路径遍历攻击。

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