如何在Flask模板中将JSON文件以application/json格式POST提交？

原生HTML表单仅支持三种原生编码格式（application/x-www-form-urlencoded、multipart/form-data、text/plain），确实不支持直接以application/json格式提交文件内容，需要通过前端JavaScript拦截表单提交动作，手动构造符合要求的请求完成替代。

第一步：改造模板代码 #

把原来带multipart/form-data配置的表单替换为如下代码，移除原生提交的冗余配置，内置JS逻辑实现JSON格式提交：

{% extends "layout.html" %}    

{% block title %}Upload{% endblock %}

{% block body %}               
  <form id="jsonUploadForm" action="/upload" method="POST">
    <input type="file" name="file" accept=".json" required />
    <button type="submit">提交</button>
  </form>  

  <script>
    const uploadForm = document.getElementById('jsonUploadForm');
    const fileInput = uploadForm.querySelector('input[type="file"]');

    uploadForm.addEventListener('submit', async (e) => {
      // 阻止表单默认的原生提交逻辑
      e.preventDefault();
      
      // 校验文件选择状态
      if (!fileInput.files.length) {
        alert('请先选择需要上传的JSON文件');
        return;
      }
      const selectedFile = fileInput.files[0];

      // 读取文件完整文本内容
      const fileContent = await new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsText(selectedFile);
      });

      // 手动构造application/json格式的POST请求
      try {
        const res = await fetch(uploadForm.action, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: fileContent
        });
        // 可根据返回结果补充后续提示逻辑
        alert('上传完成');
      } catch (err) {
        alert('上传失败，请检查文件格式是否正确');
      }
    })
  </script>
{% endblock %}

第二步：适配Flask后端逻辑 #

因为请求格式从multipart/form-data改成了application/json，后端原来读取文件的逻辑需要同步调整：

• 移除原来通过request.files.get('file')读取上传文件的代码
• 改用request.get_json()直接解析请求体中的JSON内容，和前端提交的内容完全匹配

注意事项 #

• 给文件输入框加accept=".json"属性，可以在系统文件选择弹窗中过滤非JSON格式的文件，减少误操作
• 读取文件内容时建议补充JSON格式校验，比如尝试用JSON.parse()解析读取到的文件文本，格式不对的话直接拦截报错，避免向服务端提交无效内容
• 不需要给form标签保留enctype = "multipart/form-data"配置，因为表单原生提交已经被JS拦截，该配置完全不会生效

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