在Woocommerce注册表单添加图片上传字段并在后台显示的问题求助

解决方案 #

你之前后台展示代码的核心问题是误用了type="image"的表单标签，同时没有将存储的附件ID转换为可访问的文件地址，替换以下代码即可解决问题：

1. 替换后台展示/编辑代码

完全替换你之前尝试的后台显示代码为如下内容：

// 后台用户资料页展示/编辑上传的ID文件
function display_pro_image_admin_field( $user ) {
    $pro_image_id = get_user_meta( $user->ID, 'pro_image', true );
    ?>
    <h3><?php _e('用户身份认证材料', 'woocommerce' ); ?></h3>
    <table class="form-table">
        <tr>
            <th><label for="pro_image"><?php _e( '上传的证件文件', 'woocommerce' ); ?></label></th>
            <td>
                <?php if ( $pro_image_id && is_numeric($pro_image_id) ) : 
                    $file_url = wp_get_attachment_url( $pro_image_id );
                    $file_type = get_post_mime_type( $pro_image_id );
                ?>
                    <!-- 展示文件 -->
                    <div style="margin-bottom:10px;">
                        <?php if ( str_starts_with( $file_type, 'image/' ) ) : ?>
                            <img src="<?php echo esc_url( $file_url ); ?>" style="max-width:200px;max-height:200px;object-fit:contain;" alt="用户证件">
                        <?php else : ?>
                            <p>当前文件：<a href="<?php echo esc_url( $file_url ); ?>" target="_blank">查看PDF证件</a></p>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
                <!-- 支持后台更新文件 -->
                <input type="file" name="pro_image" accept="image/*,.pdf" class="regular-text">
                <p class="description">如需替换原有证件，请上传新文件</p>
            </td>
        </tr>
    </table>
    <?php
}
add_action( 'show_user_profile', 'display_pro_image_admin_field', 10, 1 );
add_action( 'edit_user_profile', 'display_pro_image_admin_field', 10, 1 );

// 后台用户资料更新时保存新上传的证件
function save_pro_image_admin_field( $user_id ) {
    if ( ! current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }
    if ( isset( $_FILES['pro_image'] ) && ! empty( $_FILES['pro_image']['name'] ) ) {
        require_once( ABSPATH . 'wp-admin/includes/image.php' );
        require_once( ABSPATH . 'wp-admin/includes/file.php' );
        require_once( ABSPATH . 'wp-admin/includes/media.php' );
        $attach_id = media_handle_upload( 'pro_image', 0 );
        if ( ! is_wp_error( $attach_id ) ) {
            // 可删除旧附件节省服务器空间
            $old_attach_id = get_user_meta( $user_id, 'pro_image', true );
            if ( is_numeric($old_attach_id) ) {
                wp_delete_attachment( $old_attach_id );
            }
            update_user_meta( $user_id, 'pro_image', $attach_id );
        }
    }
}
add_action( 'personal_options_update', 'save_pro_image_admin_field' );
add_action( 'edit_user_profile_update', 'save_pro_image_admin_field' );

// 给后台用户资料表单添加上传支持
function add_admin_user_form_enctype() {
    echo ' enctype="multipart/form-data"';
}
add_action( 'user_edit_form_tag', 'add_admin_user_form_enctype' );

兼容提示：如果服务器PHP版本低于8.0，将代码中的str_starts_with( $file_type, 'image/' )替换为strpos( $file_type, 'image/' ) === 0即可正常运行

2. 优化原有注册验证逻辑（可选但建议）

你原有注册环节的验证代码存在逻辑错误，文件上传字段不会出现在$_POST全局变量中，所以原有验证不会生效，可替换为如下代码：

// 修正后的注册字段验证
function ValidateImageField( $errors, $username, $email ) {
    if ( empty( $_FILES['pro_image']['name'] ) ) {
        $errors->add('pro_image_error', __( '请上传有效证件文件', 'woocommerce' ) );
    }
    return $errors;
}
add_filter('woocommerce_registration_errors','ValidateImageField',10,3 );

替换完成后，进入后台用户编辑页面即可正常查看用户注册时上传的证件文件，同时支持管理员直接在后台更新替换用户证件。

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