无法将application/x-www-form-urlencoded转为application/json：Flask与JS传图报错求助

按钮嵌套在<form>标签内，且未指定type="button"，浏览器会默认将其识别为type="submit"按钮。点击时会优先触发表单的原生提交行为，这个行为发送的请求采用表单默认的application/x-www-form-urlencoded类型，直接覆盖了你通过fetch发起的JSON请求，导致后端拿到的Content-Type不符合预期。

1. 阻止表单默认提交行为 #

有两种方式可选：

方式一：给按钮添加type="button"属性

修改HTML中的按钮代码，明确指定按钮类型为普通按钮，避免触发表单提交：

<button type="button" onclick="sendCanvasImage()">Convert to Image</button>

方式二：在函数内阻止默认事件

修改sendCanvasImage函数，接收事件参数并阻止默认行为：

async function sendCanvasImage(event) {
  event.preventDefault(); // 阻止表单默认提交
  var canvas = document.getElementById('canvas');
  var imageData = canvas.toDataURL('image/png');

  var response = await fetch('/save-image', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ imageData })
  });
  
  // 可选：处理响应结果
  const result = await response.text();
  console.log(result);
}

同时修改HTML中的按钮调用，传递事件参数：

<button onclick="sendCanvasImage(event)">Convert to Image</button>

2. 完善后端保存逻辑 #

你的Flask代码中缺少文件保存的实际代码，以及请求成功后的响应，补充完整：

import os
import uuid
import base64
from flask import Flask, render_template, request

app = Flask(__name__)
# 确保images目录存在
os.makedirs('images', exist_ok=True)

@app.route('/')
@app.route('/index')
def index():
    return render_template('index.html')

@app.route('/save-image', methods=['POST'])
def save_image():
    content_type = request.headers.get('Content-Type')
    if content_type != 'application/json':
        return f'Unsupported Content-Type: {content_type}', 400

    data = request.get_json()
    if not data or not data.get('imageData'):
        return 'Missing image data', 400

    image_data = data['imageData']
    try:
        image_data = image_data.split(',')[1]
        image_data = base64.b64decode(image_data)
        filename = f'{uuid.uuid4()}.png'
        filepath = os.path.join('images', filename)
        
        with open(filepath, 'wb') as f:
            f.write(image_data)
        
        return f'Image saved successfully: {filename}', 200
    except Exception as e:
        return f'Error saving image: {str(e)}', 500

验证效果 #

修改后点击按钮，浏览器会通过fetch发送JSON请求，后端可以正确识别Content-Type: application/json，并完成图片的保存操作。

内容的提问来源于stack exchange，提问作者Nguyễn Đức Mạnh