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

// 错误：将文件输入元素（DOM对象）添加到FormData
form_data.append("file", $("#edit_form #image_field")[0]);

// 正确：获取文件输入元素，然后从其files属性中获取第一个文件对象
var fileInput = $("#edit_form #image_field")[0];
if (fileInput.files.length > 0) {
    form_data.append("file", fileInput.files[0]); // 确保添加的是文件对象
} else {
    console.warn("未选择文件或文件输入为空。");
}

// 错误：contentType: multipart/form-data 会导致jQuery尝试自行设置，可能出错
$.ajax({
    // ...
    contentType: multipart/form_data, // 这不是一个字符串，且不应由jQuery设置
    // ...
});

$.ajax({
    type: 'POST',
    url: '/api/add_product_image',
    data: form_data,
    contentType: false, // 告知jQuery不要设置Content-Type头
    processData: false, // 告知jQuery不要处理数据，让FormData自行处理
    success: function(data) {
        console.log('Success!', data);
        // 处理成功响应
    },
    error: function(xhr, status, error) {
        console.error('Error:', status, error);
        // 处理错误响应
    }
});

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.route('/api/add_product_image', methods=['POST'])
def add_product_image():
    if request.method == 'POST':
        try:
            # 从form_data中获取其他字段（如果需要）
            product_id = request.form.get("id")
            if not product_id:
                return jsonify({"status": "error", "message": "Product ID is missing"}), 400

            # 打印request.form和request.files来调试
            print("Form Data:", request.form)
            print("Files Data:", request.files)

            # 从request.files中获取文件，键名需与前端form_data.append('key', file)中的key一致
            file = request.files.get("file")

            if file and file.filename: # 检查文件是否存在且文件名不为空
                # 确保文件名安全，防止目录遍历攻击
                from werkzeug.utils import secure_filename
                filename = secure_filename(file.filename)
                # 可以根据product_id或其他逻辑重命名文件
                file_extension = os.path.splitext(filename)[1]
                save_filename = f"{product_id}{file_extension}" # 示例：使用产品ID作为文件名
                file_path = os.path.join(UPLOAD_FOLDER, save_filename)

                file.save(file_path)
                return jsonify({"status": "success", "message": f"File uploaded and saved as {save_filename}"})
            else:
                return jsonify({"status": "error", "message": "No file part or empty file"}), 400
        except Exception as e:
            print(f"Error during file upload: {e}")
            return jsonify({"status": "error", "message": str(e)}), 500

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