如何在React中发送图片与用户数据至Flask后端并接收？

React 端修改 #

1. 更新 FormData 构造：把用户名称也加入 FormData，不用单独拆分传递：

const newData = new FormData()
newData.append('file', image)
newData.append('name', data.name) // 新增：将name字段加入FormData
await createArtist({ token: token, formData: newData })

2. 调整 API 请求函数：移除 URL 中的 name 参数，直接传递包含所有数据的 FormData：

async function createArtist({ token, formData }){
    return await fetch(`/create_artist`, { // 移除URL路径中的/${name}
        method: "POST",
        headers:{
            'Authorization': 'Bearer ' + token
            // 注意：无需手动设置Content-Type，浏览器会自动为FormData生成正确的multipart/form-data请求头
        },
        body: formData // 传递完整的FormData
    }).then(async (response) => {
        const jsonResponse = await response.json();
        if(!response.ok)
        {
            if(response.status === 401)
                throw new Error(jsonResponse.msg);
            else
                throw new Error('Unknown error ' + response.status);
        }
    });
}

Flask 端修改 #

1. 更新路由规则：移除 URL 中的 <name> 参数，改为通用 POST 路由：

@app.route("/create_artist", methods=["POST"]) # 移除路径中的/<name>
@cross_origin()
@jwt_required()
def create_artist():
    # user_id = get_jwt_identity()

    # 从FormData中获取字段和文件
    name = request.form.get('name')
    if not name:
        return jsonify({"msg": "Name is required"}), 400
    
    data = request.files.get("file")
    if not data:
        return jsonify({"msg": "File is required"}), 400

    image_bytes = helpers.read_file_bytes(data)

    try:
        utils.create_artist(connection, name, image_bytes)
    except Exception as e:
        print(e) # 打印错误便于调试
        return jsonify({"msg": "Server Error"}), 500 # 服务器内部错误用500状态码更规范
    return jsonify({"msg": "Success"}), 200

关键说明 #

• FormData 是专门用于传输文件和键值对的格式，浏览器会自动处理请求头，无需手动配置。
• Flask 中通过 request.form 获取 FormData 里的普通文本字段，request.files 获取上传的文件对象。
• 新增了基础参数校验，确保必填字段存在，同时修正了服务器错误的状态码（401为未授权，内部错误应使用500）。

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