WordPress前端提交自定义文章类型时特色图片上传失败如何修复？

核心问题原因 #

• 表单未添加enctype="multipart/form-data"属性：HTML表单上传文件必须携带该属性，否则浏览器不会传输任何文件数据，后端无法接收图片。
• 缺少上传结果校验：原代码未判断media_handle_upload的执行结果，上传失败时直接设置特色图会产生无用报错。
• 未适配匿名投稿的权限限制：WordPress默认仅登录用户拥有文件上传权限，未登录用户提交时会被拦截。

完整修改后代码 #

<?php 
add_shortcode( 'singul_frontend_post', 'singul_frontend_post' );
function singul_frontend_post() {
    singul_save_post_if_submitted();
?>
<div id="postbox">
    <!-- 新增enctype属性，支持文件上传 -->
    <form id="new_post" name="new_post" method="post" enctype="multipart/form-data">

        <div class="form-group">
            <label for="title">Student Name</label><br />
            <input type="text" id="title" value="" tabindex="1" size="20" name="title" class="form-control" />
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="ssc">Year Of SSC</label><br />
                    <select name="ssc" class="form-control" searchable="A">
                        <?php
                        $tax_terms = get_terms('ssc', array('hide_empty' => '0'));      
                        echo '<option value="" selected disabled hidden>Choose Year</option>';
                        foreach ( $tax_terms as $tax_term ):  
                            echo '<option value="'.$tax_term->name.'">'.$tax_term->name.'</option>';   
                        endforeach;
                        ?>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="group">Group</label><br />
                    <select name="group" class="form-control" searchable="A">
                        <?php
                        $tax_terms = get_terms('group', array('hide_empty' => '0'));      
                        echo '<option value="" selected disabled hidden>Choose Group</option>';
                        foreach ( $tax_terms as $tax_term ):  
                            echo '<option value="'.$tax_term->name.'">'.$tax_term->name.'</option>';   
                        endforeach;
                        ?>
                    </select>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="cposition">Current Position</label><br />
                    <input type="text" id="cposition" value="" tabindex="1" size="20" name="cposition" class="form-control" />
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="cinstitute">Current Institute</label><br />
                    <input type="text" id="cinstitute" value="" tabindex="1" size="20" name="cinstitute" class="form-control" />
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="contact">Contact Number</label><br />
                    <input type="text" id="contact" value="" tabindex="1" size="20" name="contact" class="form-control"  placeholder="01XXXXXXXXX"/>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="email">Email Address</label><br />
                    <input type="email" id="email" value="" tabindex="1" size="20" name="email" class="form-control"  />
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="facebook">Facebook ID</label><br />
                    <input type="text" id="facebook" value="" tabindex="1" size="20" name="facebook" class="form-control"  />
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="user-image-featured">Photo</label><br />
                    <input type="file" name="user-image-featured" id="user-image-featured" size="20" class="form-control-file" accept="image/*">
                </div>
            </div>
        </div>
   
        <?php wp_nonce_field( 'wps-frontend-post' ); ?>

        <div class="form-group">
            <button type="submit" value="Publish" tabindex="6" id="submit" name="submit" class="btn btn-primary">Submit</button>
        </div>
    
    </form>
</div>
<?php
}

function singul_save_post_if_submitted() {
    // 停止执行如果表单未提交
    if ( !isset($_POST['title']) ) {
        return;
    }

    // 校验nonce
    if( !wp_verify_nonce($_POST['_wpnonce'], 'wps-frontend-post') ) {
        echo 'Did not save because your form seemed to be invalid. Sorry';
        return;
    }

    // 基础校验
    if (strlen($_POST['title']) < 3) {
        echo 'Please enter a title. Titles must be at least three characters long.';
        return;
    }

    // 组装文章数据
    $post = array(
        'post_title'    => $_POST['title'],
        'post_status'   => 'draft',
        'post_type'     => 'student'
    );
    
    $cposition = sanitize_text_field($_POST['cposition']);
    $institute = sanitize_text_field($_POST['cinstitute']);
    $contact = sanitize_text_field($_POST['contact']);
    $email = sanitize_email($_POST['email']);
    $fbid = sanitize_text_field($_POST['facebook']);
    $ssc = sanitize_text_field($_POST['ssc']);
    $group = sanitize_text_field($_POST['group']);
    
    // 插入文章
    $post_id = wp_insert_post($post);
    if (is_wp_error($post_id)) {
        echo 'Failed to save post, please try again.';
        return;
    }
    
    // 保存自定义字段和分类
    update_post_meta( $post_id, 'snp_student_cposition', $cposition );
    update_post_meta( $post_id, 'snp_student_institute', $institute );
    update_post_meta( $post_id, 'snp_student_contact', $contact );
    update_post_meta( $post_id, 'snp_student_email', $email );
    update_post_meta( $post_id, 'snp_student_fbid', $fbid );
    wp_set_object_terms($post_id, $ssc, 'ssc');
    wp_set_object_terms($post_id, $group, 'group');
    
    // 仅当有文件上传时执行图片处理
    if (isset($_FILES['user-image-featured']) && $_FILES['user-image-featured']['error'] == UPLOAD_ERR_OK) {
        // 加载后台上传依赖文件
        require_once( ABSPATH . 'wp-admin/includes/image.php' );
        require_once( ABSPATH . 'wp-admin/includes/file.php' );
        require_once( ABSPATH . 'wp-admin/includes/media.php' );
        
        // 临时赋予未登录用户上传权限
        add_filter('user_has_cap', function($allcaps, $cap, $args) {
            if ($args[0] == 'upload_files') {
                $allcaps['upload_files'] = true;
            }
            return $allcaps;
        }, 10, 3);
        
        // 限制允许上传的文件类型为图片
        add_filter('upload_mimes', function($mimes) {
            return array(
                'jpg|jpeg|jpe' => 'image/jpeg',
                'gif' => 'image/gif',
                'png' => 'image/png'
            );
        });
        
        // 处理上传
        $attachment_id = media_handle_upload( 'user-image-featured', $post_id);
        if (!is_wp_error($attachment_id)) {
            set_post_thumbnail( $post_id, $attachment_id );
        }
    }
         
    echo 'Saved your post successfully! :)';
}

额外优化点 #

• 新增了字段内容 sanitize 处理，避免恶意输入
• 修正了重复的id属性问题，符合HTML规范
• 给文件上传框新增了accept="image/*"属性，引导用户仅选择图片文件
• 新增文章插入失败、上传失败的异常判断，避免无效操作

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