JavaScript Fetch与FormData：解决表单提交中断事件流的问题

async function save_background_picture(e){
    e.preventDefault(); // 阻止默认的表单提交行为
    // ... 其他代码
}

console.log("test 2"); // 正确的字符串字面量用法

// 假设 save_bg_btn, file_bg_pic 已经在DOM中正确获取
const save_bg_btn = document.getElementById('save-background-button'); // 示例ID
const file_bg_pic = document.getElementById('background-picture-input'); // 示例ID

// 监听按钮点击事件
save_bg_btn.addEventListener('click', save_background_picture);

/**
 * 处理背景图片保存逻辑
 * @param {Event} e - 点击事件对象
 */
async function save_background_picture(e){
    e.preventDefault(); // 核心：阻止默认的表单提交行为

    console.log("test 1: 事件开始执行");

    // 检查文件是否已选择
    if (!file_bg_pic.files || file_bg_pic.files.length === 0) {
        console.warn("请选择一个文件！");
        return; // 如果没有文件，则直接返回
    }

    const formData = new FormData();
    const selectedFile = file_bg_pic.files[0];
    const url = 'http://localhost/test/background-cover.php'; // PHP REST API 端点

    formData.append("file_bg_pic", selectedFile); // 将文件添加到FormData

    try {
        // 等待表单数据提交并获取响应
        const responseData = await post_formdata_request(url, formData);
        console.log("文件上传成功，服务器响应:", responseData);
        // 这里可以根据服务器响应更新UI，例如显示成功消息或图片预览
    } catch (err) {
        console.error("文件上传失败:", err);
        // 处理错误，例如显示错误消息给用户
    }

    console.log("test 2: 事件执行结束"); // 修正后的 console.log
}

/**
 * 发送FormData到指定URL
 * @param {string} url - 目标URL
 * @param {FormData} formData - 待发送的FormData对象
 * @returns {Promise<any>} - 解析为JSON响应数据的Promise
 */
function post_formdata_request(url, formData){
    // Fetch API本身返回Promise，无需手动包裹在new Promise中
    return fetch(url, {
        method: 'POST',
        body: formData // Fetch会自动设置Content-Type为multipart/form-data，无需手动设置
    })
    .then(response => {
        // 检查HTTP响应状态码，如果不是2xx，则抛出错误
        if (!response.ok) {
            // 可以尝试解析错误响应体，如果服务器提供了
            return response.json().then(errorData => {
                throw new Error(`HTTP error! Status: ${response.status}, Message: ${errorData.message || '未知错误'}`);
            }).catch(() => {
                throw new Error(`HTTP error! Status: ${response.status}`);
            });
        }
        return response.json(); // 解析JSON响应
    });
    // .catch() 由调用者处理，即 save_background_picture 中的 try...catch 块
}