如何修复Python/React应用中文件上传交互的网络错误？

核心错误点及修复步骤 #

1. 前端请求格式错误

• 原代码将FormData转为JSON并设置Content-Type: application/json，但上传文件必须使用multipart/form-data格式，直接传递FormData即可，浏览器会自动处理正确的请求头。
• 新增响应状态检查，便于排查HTTP层级错误。

修复后的APIService.js：

export default class APIService {
    static InsertArticle(body) {
        return fetch(`http://127.0.0.1:5000/upload`, { 
            method: 'POST',
            body: body
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP错误！状态码: ${response.status}`);
            }
            return response.json();
        })
        .catch(error => console.error('API请求错误:', error));
    }
}

2. 后端文件处理与GPT调用错误

• 原代码直接把request.files["body"]（FileStorage对象）当作文件路径传入函数，导致路径不存在错误，改为读取文件内容到内存流BytesIO中处理。
• GPT-4V不支持直接解析PPT文件，需提取PPT中的文本和图片（转base64格式）后按模型要求的结构传入。

修复后的main.py：

import openai
from openaiapikey import openaiapikey
from flask import Flask, request
from flask import jsonify
from flask_cors import CORS
from pptx import Presentation
from io import BytesIO
import base64

app = Flask(__name__)
CORS(app, origins=["http://localhost:3000"], methods=["GET", "POST", "OPTIONS"], supports_credentials=True)

openai.api_key = openaiapikey

def extract_pptx_content(file_stream):
    presentation = Presentation(file_stream)
    slides_content = []
    
    for slide_idx, slide in enumerate(presentation.slides):
        slide_data = {
            "slide_number": slide_idx + 1,
            "text": "",
            "images": []
        }
        # 提取幻灯片文本
        for shape in slide.shapes:
            if hasattr(shape, "text"):
                slide_data["text"] += shape.text + "\n"
            # 提取图片并转base64格式
            elif shape.has_image:
                image_blob = shape.image.blob
                base64_img = base64.b64encode(image_blob).decode("utf-8")
                slide_data["images"].append(f"data:image/png;base64,{base64_img}")
        slides_content.append(slide_data)
    
    return slides_content

def analyze_presentation(slides_content, industry):
    # 构建GPT请求消息：先传递文本总览，再逐个传递带图片的幻灯片
    messages = [
        {
            "role": "user",
            "content": [
                {
                    "type": "text",
                    "text": f"这是一份{industry}行业的PPT，请分析内容并给出具体改进建议。所有幻灯片文本如下：\n{''.join([f'幻灯片{s["slide_number"]}: {s["text"]}\n' for s in slides_content])}"
                }
            ]
        }
    ]
    
    # 为含图片的幻灯片添加图片内容
    for slide in slides_content:
        if slide["images"]:
            image_content = [{"type": "text", "text": f"幻灯片{slide["slide_number"]}的图片："}]
            for img in slide["images"]:
                image_content.append({"type": "image_url", "image_url": {"url": img}})
            messages.append({"role": "user", "content": image_content})
    
    response = openai.ChatCompletion.create(
        model="gpt-4-vision-preview",
        messages=messages,
        max_tokens=1000
    )
    
    return {
        "result": response.choices[0].message["content"],
        "slides": slides_content
    }

@app.route('/upload', methods=['POST'], strict_slashes=False)
def process_form():
    try:
        industry = request.form.get("title")
        ppt_file = request.files.get("body")
        
        if not industry or not ppt_file:
            return jsonify({"error": "缺少行业信息或PPT文件"}), 400
        
        # 读取上传文件到内存流
        file_stream = BytesIO(ppt_file.read())
        slides_content = extract_pptx_content(file_stream)
        
        # 调用GPT分析
        result = analyze_presentation(slides_content, industry)
        
        return jsonify(result)
    except Exception as e:
        print("服务器内部错误:", str(e))
        return jsonify({"error": str(e)}), 500
        
if __name__ == "__main__":
    app.run(debug=True, threaded=True)

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