Axios POST请求成功但代码未执行、React状态未更新问题

问题现象 #

• 前端uploadDoc函数无console.log输出，React状态未更新
• Postman测试POST请求无返回结果，但浏览器Network面板显示请求状态码200
• axios.get()测试可返回数据，但状态需刷新页面才会更新

核心问题排查 #

1. 前端错误调用preventDefault()：uploadDoc参数是File对象，不是事件对象，调用document.preventDefault()会直接报错，中断后续代码执行
2. 后端POST响应字段错误：POST请求返回的status字段写反为get_success，导致前端可能误解响应状态
3. 手动设置Content-Type导致请求格式错误：axios会自动处理multipart/form-data请求并添加正确的boundary，手动设置会覆盖默认逻辑，可能导致后端无法解析文件
4. 后端分类函数可能阻塞：classify_document如果耗时过长或内部报错，会导致POST请求响应延迟或失败

修复步骤 #

前端代码修复 #

移除错误的preventDefault()调用，修正请求头设置，优化状态更新逻辑：

const documentUploadHandler = ({files}) => {
    const [file] = files;
    uploadDoc(file);
};

const uploadDoc = async (document) => {
    // 先检查doc_type变量是否定义，避免未定义报错
    console.log(typeof doc_type !== 'undefined' ? doc_type : 'doc_type未定义');
    
    let formData = new FormData();
    formData.append('document', document);

    try {
        // axios会自动处理multipart/form-data的Content-Type，无需手动设置
        const response = await axios.post('https://127.0.0.1:8000/api/upload', formData);

        // 根据状态类型直接设置，若doc_type是数组类型则保留[]，否则直接赋值
        setDocType(response.data.classification);
        console.log("hello");
        console.log(response.data);

    } catch (error) {
        console.log('Error uploading file:', error);
        // 打印完整错误信息，便于排查
        if (error.response) console.log('响应详情:', error.response.data);
    }
};

后端代码修复 #

修正响应状态字段，添加关键日志，确保分类函数正常执行：

@app.route('/api/upload', methods=['POST', 'GET'])
@cross_origin(supports_credentials=True)
def upload_file():
    global class_result
    if request.method == 'POST':
        try:
            file = request.files['document']
            print(f"Uploading document {file.filename}")
            filename = secure_filename(file.filename)
            file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
            file.save(file_path)
            
            # 捕获分类函数可能的异常
            try:
                class_result = classify_document("model5", file_path)
                print(f"分类结果: {class_result}")
            except Exception as classify_err:
                print(f"分类失败: {classify_err}")
                return jsonify({"status": "failed", "error": f"分类错误: {str(classify_err)}"})
            
            # 修正POST请求的status字段
            return jsonify({"status": "post_success", "classification": class_result})

        except Exception as e:
            print(f"文件上传失败: {e}")
            return jsonify({"status": "failed", "error": str(e)})
    # GET请求返回对应状态
    return jsonify({"status": "get_success", "classification": class_result})

额外优化建议 #

• 避免使用global变量存储分类结果，改用会话（session）或数据库存储，防止多用户请求互相干扰
• 前端添加上传加载状态提示，比如在上传时显示loading动画，上传完成后展示结果
• 后端配置文件上传大小限制，例如：

  app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 限制16MB
  

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