Flask 多文件上传实践指南

本文深入剖析了在 Flask 框架下如何与原生 JavaScript（XMLHttpRequest）协同实现安全、高效、可扩展的多图片上传功能，不仅手把手纠正前端表单配置与 FormData 使用误区，还通过 secure_filename 强制防护路径遍历、统一字段名+getlist 精准解析文件列表、结构化 JSON 响应提升交互体验，并延伸覆盖并发处理、用户隔离、异步优化等生产级要点，为构建轻量却健壮的图像上传服务提供了经过实践验证的一站式解决方案。

本文详解如何在 Flask 后端与原生 JavaScript（XMLHttpRequest）之间安全、高效地实现多图片上传，涵盖前端表单优化、后端文件处理、安全性加固（如 secure_filename）、并发支持要点及异步扩展建议。

在构建轻量级图像上传服务时，合理搭配 Flask 的简洁路由与原生 XMLHttpRequest 的可控性，既能避免引入大型前端框架的开销，又能保障上传体验与系统健壮性。以下是一套经过实践验证的完整方案，兼顾可读性、安全性与可扩展性。

✅ 前端优化：支持多图、增强反馈、规避常见陷阱

首先，需修正 HTML 文件输入控件以启用多文件选择——关键在于添加 multiple 属性（原代码中缺失），否则 files.length > 1 永远不成立：

<input 
  type="file" 
  name="fileToUpload" 
  id="fileToUpload" 
  onchange="fileSelected();" 
  accept="image/*" 
  capture="camera" 
  multiple  <!-- ? 必加 -->
/>

其次，在 uploadFile() 中，FormData 的键名应统一为标准字段名（如 'file'），而非动态使用 file.name。原因在于：Flask 的 request.files 是以 表单字段名 为键的字典，而非原始文件名；若前端用 fd.append(file.name, file)，后端将无法通过 request.files['fileToUpload'] 正确获取——所有文件实际都绑定到了不同键下，导致 request.files.values() 成为唯一可靠遍历方式，但语义混乱且易出错。

✅ 推荐写法（语义清晰、后端匹配）：

function uploadFile() {
  const fd = new FormData();
  const files = document.getElementById('fileToUpload').files;

  // 统一使用固定字段名 'file'，支持多文件
  for (let i = 0; i < files.length; i++) {
    fd.append('file', files[i]); // ? 所有文件共用同一字段名
  }

  const xhr = new XMLHttpRequest();
  xhr.upload.addEventListener("progress", uploadProgress, false);
  xhr.addEventListener("load", uploadComplete, false);
  xhr.addEventListener("error", uploadFailed, false);
  xhr.addEventListener("abort", uploadCanceled, false);

  xhr.open("POST", "/save", true);
  xhr.send(fd);
}

? 提示：FormData.append('file', file) 允许多个同名字段，Flask 自动将其聚合为 MultiDict，request.files.getlist('file') 即可获取全部 FileStorage 对象。

✅ 后端精简：安全存储 + 零冗余逻辑

原后端存在冗余路由逻辑（/ 处理 POST）、未校验文件、硬编码路径等风险。优化后如下：

from flask import Flask, render_template, request
from flask_bootstrap import Bootstrap5
from werkzeug.utils import secure_filename
import os

app = Flask(__name__, template_folder='./templates')
bootstrap = Bootstrap5(app)

# 确保上传目录存在
os.makedirs('upload', exist_ok=True)

@app.route('/', methods=['GET'])
def index():
    return render_template('index.html')

@app.route('/save', methods=['POST'])
def save():
    # 获取所有同名 'file' 字段的文件列表
    uploaded_files = request.files.getlist('file')

    if not uploaded_files:
        return 'No files selected', 400

    saved_files = []
    for file in uploaded_files:
        if file.filename == '':  # 客户端可能提交空文件项
            continue
        # 安全重命名，防止路径遍历（如 ../../etc/passwd）
        filename = secure_filename(file.filename)
        filepath = os.path.join('upload', filename)
        file.save(filepath)
        saved_files.append(filename)

    # 返回结构化 JSON 响应（便于前端解析）
    return {
        "status": "success",
        "saved": saved_files,
        "count": len(saved_files)
    }

• ✅ secure_filename() 是强制要求：它移除危险字符（如 /, ..），确保文件名仅含 ASCII 字母、数字、下划线和点号；
• ✅ os.makedirs(..., exist_ok=True) 避免首次运行因目录不存在而报错；
• ✅ 返回 JSON 而非纯文本，使前端 uploadComplete 可解析结果并做精细化反馈（替代 alert()）：

function uploadComplete(evt) {
  try {
    const res = JSON.parse(evt.target.responseText);
    alert(`✅ 上传成功！共 ${res.count} 张图片：${res.saved.join(', ')}`);
  } catch (e) {
    alert('⚠️ 服务器返回非JSON格式：' + evt.target.responseText);
  }
}

⚙️ 关于并发、多用户与异步支持的说明

• 多用户并发：Flask 默认使用多线程 Werkzeug 开发服务器（app.run()），天然支持多请求并发。生产环境建议切换至 Gunicorn/Uvicorn + Nginx，进一步提升吞吐与稳定性。
• 多用户隔离：当前代码将所有文件存入同一 upload/ 目录，不区分用户。若需隔离，应在保存路径中加入用户标识（如 upload/{user_id}/{filename}），这需要配合用户认证系统（如 Flask-Login）获取当前用户 ID。
• 异步支持：Flask 2.0+ 原生支持 async/await 视图函数，但文件 I/O（如 .save()）仍是阻塞操作。若需真正异步，可：
  • 使用 await loop.run_in_executor() 将 file.save() 托管至线程池；
  • 或改用 aiofiles 库配合异步文件写入（需搭配 ASGI 服务器如 Uvicorn）；
  • ⚠️ 注意：对普通图片上传，同步 I/O 已足够高效；异步更适合高延迟外部调用（如调用 AI API）。

✅ 总结：关键实践清单

这套方案在保持技术栈轻量的同时，覆盖了生产就绪的核心要素：健壮性、安全性、可维护性与明确的演进路径。

以上就是《Flask 多文件上传实践指南》的详细内容，更多关于的资料请关注golang学习网公众号！