如何在WooCommerce结账页面添加文件上传功能？

问题背景 #

出于安全原因，WooCommerce原生不支持在结账页面添加文件上传字段，但我需要实现该功能：让客户上传文档并关联到对应订单，管理员后续可在订单后台查看这些文档。

已尝试的失败方法 #

• Gravity Forms上传表单：通过钩子在结账页嵌入表单，但文件字段的数据从未出现在$_FILES或$_POST中，无法获取上传内容。
• AJAX上传字段：自定义上传字段后用AJAX将数据发送到WordPress AJAX函数，但存在明显缺陷：无法验证文件大小或是否完成上传；且会将文件上传路径写入input元素的value属性，存在安全隐患。相关代码如下：

add_action( 'wp_ajax_mishaupload', 'misha_file_upload' );
add_action( 'wp_ajax_nopriv_mishaupload', 'misha_file_upload' );

function misha_file_upload(){

    $upload_dir = wp_upload_dir();

    if ( isset( $_FILES[ 'misha_file' ] ) ) {
        $path = $upload_dir[ 'path' ] . '/' . basename( $_FILES[ 'misha_file' ][ 'name' ] );

        if( move_uploaded_file( $_FILES[ 'misha_file' ][ 'tmp_name' ], $path ) ) {
            echo $upload_dir[ 'url' ] . '/' . basename( $_FILES[ 'misha_file' ][ 'name' ] );
        }
    }
    die;
}

其中echo $upload_dir[ 'url' ] . '/' . basename( $_FILES[ 'misha_file' ][ 'name' ] );这行代码会直接暴露文件路径，安全性较差。

当前进展与新问题 #

我通过以下代码成功在结账页添加了file类型字段，但无法获取上传的文件数据：

1. 扩展WooCommerce表单字段类型 #

/**
 * Function for `woocommerce_form_field` filter-hook.
 *
 * @param  $field
 * @param  $key
 * @param  $args
 * @param  $value
 *
 * @return
 */
function wp_kama_woocommerce_form_field_filter( $field, $key, $args, $value ){

    // check if field is a file field
    if( $args['type'] == 'file' ){
            // add custom HTML to the field
            $field = '<div class="woocommerce-additional-fields__field-wrapper">';
            $field .= '<p class="form-row notes woocommerce-validated" id="certificate_file_upload_field" data-priority="">';
            $field .= '<label for="certificate_file_upload" class="">Upload Certificate</label>';
            $field .= '<span class="woocommerce-input-wrapper">';

            $field .= sprintf(
                '<input type="file" class="%s" name="%s" id="%s"/>',
                esc_attr( implode( ' ', $args['class'] ) ),
                esc_attr( $key ),
                esc_attr( $args['id'] ),
            );

            $field .= '</span>';
            $field .= '</p>';
            $field .= '</div>';
    }

    return $field;
}
add_filter( 'woocommerce_form_field', 'wp_kama_woocommerce_form_field_filter', 10, 4 );

2. 在结账页添加自定义字段 #

function add_custom_checkout_field($checkout) {
    woocommerce_form_field('certificate_file_upload', array(
        'type' => 'file',
        'class' => array('form-row-wide'),
        'label' => __('Upload Certificate'),
        'required' => false,
    ), $checkout->get_value('certificate_file_upload'));
}
add_action( 'woocommerce_after_order_notes', 'add_custom_checkout_field' );

目前字段已能正常显示在结账页，但$_FILES和$_POST中均无certificate_file_upload对应的文件数据，导致无法处理客户上传的文件。

疑问与求助 #

我研究过WooCommerce处理默认结账字段的逻辑，猜测数据可能由woocommerce/assets/js/frontend/checkout.js管理，但不确定这是否是关键文件。且我不想直接修改该核心文件（插件更新会覆盖修改内容）。

想请教：

• 是否需要从checkout.js入手，才能让文件数据进入$_FILES？
• 有没有无需修改核心JS文件的实现方案？
• 如果自定义方案不可行，再考虑使用第三方插件。

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