在 Wordpress 中使用 Ajax (axios) 创建帖子并上传图像

Question

因此，我希望我的用户能够在前端创建帖子并使用我创建的表单上传图像。 上传图片后，我想用上传的图片更新 ACF 字段。 我看过一些关于此的帖子，但没有一个解释得很好。 我想使用 Ajax 并且我想使用 axios，所以请不要使用 jQuery。 我也用Qs。

图像本身永远不会上传，但文件名会插入媒体库中。 谢谢！

HTML

<form enctype="multipart/form-data" method="post" id="register-store-form">
    <fieldset class="store-images mb-3">
        <label for="store-images">Add images</label>
        <input type="file" id="store_images" name="store_images" multiple accept="image/png, image/jpeg">
    </fieldset>
    <button class="btn btn-primary" id="update-store">Save store</button>
</form>

PHP

function create_store() {
    check_ajax_referer('add_store', 'security');

    $name_value = $_POST['name'];
    $image_name = $_POST['image_name'];
    $image_type = $_POST['image_type'];
    
    $post_data = array(
        'post_type' => 'store',
        'post_title' => htmlentities($name_value),
        'post_content' => $_POST['description'],
        'post_status'   => 'draft'
    );

    $post_id = wp_insert_post( $post_data );

    if ( ! function_exists( 'wp_handle_upload' ) ) require_once( ABSPATH . 'wp-admin/includes/file.php' );

    $uploadedfile = $_FILES[$image_name];
    $upload_overrides = array( 'test_form' => false );
    $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );

    if ($movefile) {
        $wp_upload_dir = wp_upload_dir();
        
        $attachment = array(
            'guid' => $wp_upload_dir['url'].'/'.$image_name,
            'post_mime_type' => $image_type,
            'post_title' => $image_name,
            'post_content' => 'File '.$image_name,
            'post_status' => 'inherit'
        );
        $attach_id = wp_insert_attachment($attachment, $movefile['file']);
        update_field('field_602019eba7767', $attach_id, $post_id);
    }

    echo json_decode($response);
    exit;
}

add_action('wp_ajax_create_store', 'create_store');
add_action('wp_ajax_nopriv_create_store', 'create_store');

JS

const Qs = require('qs');
const axios = require('axios');
const saveStoreBtn = document.querySelector('#update-store');
const addStore = document.querySelector('#add-one-more-store');

function saveStore(e) {
   const storeName = document.querySelector('#store-name');
   const storeImages = document.querySelector('#store_images');
   const storeImageFile = storeImages.files[0];

   const ajaxData = {
       action : 'create_store',
       security : shkGlobal.addStore,
       name : storeName.value,
       image_name : storeImageFile.name,
       image_type : storeImageFile.type,
       description : storeDescription.value
   };

   axios.post(shkGlobal.adminUrl, Qs.stringify(ajaxData))
       .then(function(response) {
           saveStoreBtn.innerHTML = "Thank you";
   })
   .catch(err => console.log('Not working', err));
};

updateStoreBtn.addEventListener('click', saveStore);