WooCommerce：如何在后台订单详情中展示自定义上传文件

没问题，我来帮你搞定这个需求！咱们分步骤来实现，核心是先把上传的文件ID和订单关联，再在后台订单页读取并展示文件内容：

第一步：把文件ID和订单/订单项绑定 #

目前你的API只是把文件存到服务器，但没和具体订单挂钩，所以首先得把上传后返回的id保存为订单的元数据（或者订单项的元数据，看你的业务是一个订单对应一个文件还是每个商品对应一个）。

假设你的iframe在触发Add to Cart时，能把文件ID通过请求参数传过来（比如file_id），可以用下面的代码把它存到购物车，再同步到订单：

// 将文件ID存入购物车项
add_filter('woocommerce_add_cart_item_data', 'save_idea_file_id_to_cart', 10, 3);
function save_idea_file_id_to_cart($cart_item_data, $product_id, $variation_id) {
    if (!empty($_POST['file_id'])) {
        $cart_item_data['idea_file_id'] = intval($_POST['file_id']);
        // 加个唯一键避免相同商品合并购物车项
        $cart_item_data['unique_idea_key'] = md5(microtime() . rand());
    }
    return $cart_item_data;
}

// 将文件ID保存到订单项元数据（如果是每个商品对应一个文件）
add_action('woocommerce_checkout_create_order_line_item', 'save_idea_file_id_to_order_item', 10, 4);
function save_idea_file_id_to_order_item($item, $cart_item_key, $values, $order) {
    if (!empty($values['idea_file_id'])) {
        // 后台订单项会显示这个字段，第二个参数true表示不在前台显示
        $item->add_meta_data('客户上传文件ID', $values['idea_file_id'], true);
    }
}

// 或者如果是整个订单对应一个文件，保存到订单元数据
add_action('woocommerce_checkout_update_order_meta', 'save_idea_file_id_to_order');
function save_idea_file_id_to_order($order_id) {
    if (!empty($_POST['order_file_id'])) {
        update_post_meta($order_id, 'idea_file_id', intval($_POST['order_file_id']));
    }
}

第二步：在后台订单详情页读取并展示文件 #

接下来用WooCommerce的后台钩子，把文件内容（尤其是图片）展示在订单详情里。这里假设你存的JSON文件里包含图片的URL或者base64编码：

add_action('woocommerce_admin_order_data_after_order_details', 'display_idea_uploaded_file_in_order');
function display_idea_uploaded_file_in_order($order) {
    // 获取订单关联的文件ID，这里先取订单元数据，如果你用的是订单项的话就遍历订单项
    $file_id = $order->get_meta('idea_file_id');
    
    // 如果你是每个订单项对应一个文件，用这段代码遍历获取：
    /*
    $file_id = null;
    foreach ($order->get_items() as $item) {
        $file_id = $item->get_meta('客户上传文件ID');
        if ($file_id) break;
    }
    */

    if (!$file_id) return;

    // 构建文件路径
    $upload_dir = idea_get_upload_dir() . FILES_SUBDIR;
    $file_path = $upload_dir . $file_id . '.json';

    // 检查文件是否存在
    if (!file_exists($file_path)) {
        echo '<div class="order_data_column">
                <h4>客户上传内容</h4>
                <p style="color: #dc3232;">对应的上传文件不存在</p>
              </div>';
        return;
    }

    // 解析JSON内容
    $file_content = json_decode(file_get_contents($file_path), true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        echo '<div class="order_data_column">
                <h4>客户上传内容</h4>
                <p style="color: #dc3232;">文件解析失败，请检查JSON格式</p>
              </div>';
        return;
    }

    // 开始渲染展示内容
    echo '<div class="order_data_column">
            <h4>客户上传内容</h4>';

    // 展示文本类内容（如果JSON里有）
    if (!empty($file_content['description'])) {
        echo '<p><strong>备注信息：</strong>' . esc_html($file_content['description']) . '</p>';
    }

    // 展示图片（核心需求）
    if (!empty($file_content['image'])) {
        $image_src = $file_content['image'];
        // 处理图片路径：如果是相对路径转绝对，base64直接用
        if (!strpos($image_src, 'http')) {
            $image_src = wp_upload_dir()['baseurl'] . '/idea/files/' . $image_src;
        }
        echo '<p><strong>上传图片：</strong><br>
              <img src="' . esc_url($image_src) . '" style="max-width: 300px; max-height: 300px; object-fit: contain;" alt="客户上传图片"></p>';
    }

    // 其他字段可以按需添加，比如文件大小、上传时间等
    if (!empty($file_content['size'])) {
        echo '<p><strong>文件大小：</strong>' . size_format($file_content['size']) . '</p>';
    }

    echo '</div>';
}

第三步：安全与权限提示 #

• 确保你的idea/files文件夹权限设置正确（0777或者服务器允许的写入/读取权限），避免文件无法读取。
• 所有输出内容都用esc_html、esc_url做转义，防止XSS攻击。
• 如果你的JSON里的图片是base64编码，上面的代码直接就能用；如果是用户上传的图片文件（不是存在JSON里），那你需要调整API保存图片文件，然后在展示时直接输出图片的URL即可。

这样就能在WooCommerce后台的订单详情页，看到客户通过iframe上传的文件内容啦！

内容的提问来源于stack exchange，提问作者Анна Мороз