解决Flask AJAX文件上传中request.files为空的问题

<form id="edit_form" action='' method='POST' enctype='multipart/form-data'>
    <input type='file' id='image_field' name="image">
    <fieldset>
        <label for="title_en">Title EN:</label>
        <input type="text" id="title_en" name="title_en">
    </fieldset>
    <fieldset>
        <label for="title_fr">Title FR:</label>
        <input type="text" id="title_fr" name="title_fr">
    </fieldset>
</form>

// 获取文件输入元素
var fileInput = $("#edit_form #image_field")[0];
// 确保文件已被选择，并获取第一个文件对象
if (fileInput.files.length > 0) {
    form_data.append("file", fileInput.files[0]);
} else {
    console.warn("No file selected.");
    // 可以添加错误处理或提示用户选择文件
}

var form_data = new FormData();

// 1. 正确地将文件对象添加到FormData
var fileInput = $("#edit_form #image_field")[0];
if (fileInput.files.length > 0) {
    form_data.append("file", fileInput.files[0]); // 注意这里是 .files[0]
} else {
    console.error("请选择一个文件进行上传。");
    return; // 阻止请求发送
}

// 添加其他非文件数据
var id = document.querySelector("#edit_form").getAttribute("product_id");
if (id) {
    form_data.append("id", id);
} else {
    console.warn("Product ID not found.");
}
form_data.append("title_en", $("#title_en").val());
form_data.append("title_fr", $("#title_fr").val());

console.log("FormData内容（仅供参考，无法直接查看文件内容）：", form_data);

$.ajax({
    type: 'POST',
    url: '/api/add_product_image',
    data: form_data,
    // 2. 关键配置：禁用jQuery的Content-Type设置和数据处理
    contentType: false,
    processData: false,
    success: function(data) {
        console.log('文件上传成功！', data);
        // 在此处更新UI，例如显示图片预览
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('文件上传失败！', textStatus, errorThrown);
        // 显示错误信息给用户
    }
});

from flask import Flask, request, jsonify
import os

app = Flask(__name__)
# 配置上传文件保存的目录
UPLOAD_FOLDER = './static/imgs/'
if not os.path.exists(UPLOAD_FOLDER):
    os.makedirs(UPLOAD_FOLDER)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/api/add_product_image', methods=['POST'])
def add_product_image():
    if request.method == 'POST':
        try:
            # 从request.form中获取非文件数据
            product_id = request.form.get("id")
            title_en = request.form.get("title_en")
            title_fr = request.form.get("title_fr")

            if not product_id:
                return jsonify({"status": "error", "message": "Product ID is missing"}), 400

            # 从request.files中获取文件
            # 这里的"file"必须与前端form_data.append("file", ...)中的键名一致
            uploaded_file = request.files.get("file")

            if uploaded_file and uploaded_file.filename:
                # 确保文件是允许的类型，这里简化为直接保存
                # 实际应用中应进行文件类型和大小校验

                # 获取原始文件名，并安全地生成保存路径
                # 为了防止文件名冲突，通常会重命名文件
                # 例如：使用UUID或结合product_id
                filename = f"{product_id}_{uploaded_file.filename}" # 示例：结合ID和原始文件名
                # 或者直接使用ID作为文件名，并指定扩展名
                # filename = f"{product_id}.png" 

                file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
                uploaded_file.save(file_path)

                print(f"文件 {filename} 已成功保存到 {file_path}")
                return jsonify({"status": "success", "message": "文件上传成功", "filename": filename}), 200
            else:
                return jsonify({"status": "error", "message": "未选择文件或文件为空"}), 400
        except Exception as e:
            print(f"文件上传过程中发生错误: {e}")
            return jsonify({"status": "error", "message": f"服务器内部错误: {str(e)}"}), 500
    return jsonify({"status": "error", "message": "请求方法不被允许"}), 405

if __name__ == '__main__':
    app.run(debug=True)