使用HTML Form、Dropzone与Flask传文件时request.files为空的问题排查

用户实现代码 #

HTML 表单 #

<form
   action="/"
   enctype="multipart/form-data"
   method="POST"
   class="dropzone"
   id="myAwesomeDropzone"
   >
                  <div class="fallback">
                    <input
                      name="file"
                      id="file"
                      type="file"
                      accept=".csv, text/csv, text/plain, text/tsv, text/comma-separated-values"
                    />
                  </div>

                  <div class="dz-message needsclick">
                    <i class="h1 text-muted dripicons-cloud-upload"></i>
                    <h3>Drop CSV file here or click to upload.</h3>
                  </div>

                  <div class="clearfix text-right mt-3">
                    <button type="submit" class="btn btn-danger"> <i class="mdi mdi-send mr-1"></i> Submit</button>
                </div>
</form>

JavaScript 配置 #

<script>
      Dropzone.options.myAwesomeDropzone = {
        autoProcessQueue: false,
        uploadMultiple: false,
        parallelUploads: 100,
        maxFiles: 1,
        maxFilesize: 20,
        acceptedFiles: ".csv",
        addRemoveLinks: true,
        dictRemoveFile: "Remove",
        dictFileTooBig:
          "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
        dictInvalidFileType: "You can't upload files of this type.",
        dictMaxFilesExceeded: "You can only upload 1 file.",
        init: function () {
          var myDropzone = this;

          this.on("addedfile", function (file) {
            document.querySelector("button[type='submit']").disabled = false;
          });
        },
      };
    </script>

Flask 后端路由 #

@app.route("/", methods=["POST"])
@login_required
def process_csv_file():
    print("request files: ", request.files)

    file = request.files.get("file")
    print("file: ", file)
    data = pd.read_csv(io.StringIO(file.decode("utf-8")))
    print("data: ")
    print(data.head())
    return "processed"

问题原因分析 #

核心问题在于 Dropzone 接管了表单的文件管理，但原生表单提交没有触发 Dropzone 的上传流程：

• 你设置了 autoProcessQueue: false，意味着文件不会自动上传，需要手动触发上传逻辑
• 点击原生 submit 按钮时，浏览器执行默认表单提交，此时提交的是普通表单（fallback 的 input 里没有文件，因为文件已被 Dropzone 托管），所以后端 request.files 为空

另外，后端代码存在潜在错误：file.decode("utf-8") 会报错，因为 request.files.get("file") 返回的是 FileStorage 对象，没有 decode 方法，需要先读取字节流再转码。

解决方案 #

1. 修改 JavaScript 配置，手动触发 Dropzone 上传 #

在 Dropzone 的 init 方法中，给 submit 按钮添加点击事件，阻止默认表单提交，转而触发 Dropzone 的文件上传流程：

init: function () {
  var myDropzone = this;

  this.on("addedfile", function (file) {
    document.querySelector("button[type='submit']").disabled = false;
  });

  // 监听提交按钮点击，触发Dropzone上传
  this.element.querySelector("button[type='submit']").addEventListener("click", function(e) {
    e.preventDefault(); // 阻止默认表单提交
    e.stopPropagation();
    myDropzone.processQueue(); // 触发Dropzone的文件上传流程
  });

  // 可选：监听上传成功事件，处理后端响应
  this.on("success", function(file, response) {
    console.log("上传成功", response);
    // 可添加页面跳转、提示等后续逻辑
  });
}

2. 修正后端代码的文件读取逻辑 #

将 file.decode("utf-8") 改为读取文件流后转码：

@app.route("/", methods=["POST"])
@login_required
def process_csv_file():
    print("request files: ", request.files)

    file = request.files.get("file")
    print("file: ", file)
    # 修正文件读取方式
    file_content = file.stream.read().decode("utf-8")
    data = pd.read_csv(io.StringIO(file_content))
    print("data: ")
    print(data.head())
    return "processed"

3. 可选：显式设置 Dropzone 的参数名 #

确保 Dropzone 发送的参数名和后端接收的一致（默认是 file，和你的 input name 一致，显式设置可避免歧义）：

在 Dropzone 配置中添加：

paramName: "file", // 和input的name属性保持一致

验证要点 #

• 确认 Dropzone 已正确加载（浏览器控制台无报错）
• 上传文件后点击 submit 按钮，查看浏览器网络请求，确认 FormData 中包含 file 参数
• 后端打印 request.files 应能看到对应的文件对象

内容的提问来源于stack exchange，提问作者JA-pythonista