Javascript 无法使用JS将Base 64映像发送到Woocommerce/product API

实际上，我正在尝试使用verge 3D制作一个3D产品配置器，并且必须为每个特定的产品配置创建新的WooCommerce产品

一切似乎都很好，我成功地生成了一个图像捕获，它存储在一个变量中，名为base 64 jpeg

现在，我想将此变量发布到/wp-json/wc/v2/products/，并使用产品创建查询的其余部分，但API返回“提供的URL无效”

我担心WooCommerce产品REST API无法将base64图像处理为img->src: 然而，有些人似乎成功地通过了类似的请求

下面是我的JSON代码，可能格式有问题

{
"name": "Config Plexi",
"type": "simple",
"regular_price": "21.99",
"dimensions": {
    "length": "300",
    "width": "300"
},
"description": "Pellentesque habitant morbi tristique",
"images": [
{   "src":"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAIyAjIDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAECAwf/xAAdEAEBAQEBAQADAQAAAAAAAAAAEQExUQISIXFB/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAEDBP/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oADAMBAAIRAxEAPwD0oBs5QAAAAUBBQEFARQAAAIAEAAAAFAQUBBQEFAQUBBQEFgCCwBBQEFAQUBBYAgqAAAEAAAAAEFAQUBBSAgoCCoAAAAAACkAAAAAAUBBQEFACAABAAiggoCCgIKAhFICEWEBFAEIoCQigINICEUARQEFASEUgJBYAgoCCgIKAgqABACEAEFAQUBBSAgAAAAAIKAKAAAARQQUBCKQAIACgqEUgIKAiqAgpAQigILAEGgGRqEBlYsICQigILCAhFgCRI0QGRqEBmDUAZFICQigILCAiNAMigJBYAgoCCoIgsAQUBBUgAQAiKAgoCgQAFBBSCooACkBBQAUgIKAgsABYQEhFhASCxYDKxYQEhFhASEahAZg1CAyNQgMjUIDI1CAyRqEBmEahAZhFhASEWEBkahAZhFhAQUgMjUSAgoCCkBkUBBYQERQEFgCCgiAQAAVQUEFACCwEFARRQQUBFiwgIRYsBIRYQEhGoQEhFhASEahAZixYQEhGoQGYRqEBIRYQEhFhASEWEBIRYQEhFhAZhGoQGYRqEBmEaiQGYRqEBmEaiQEiRqEBmEWEBmEaiQEgsAZg1EgIRQGRQEFAZFASCoAAIooKQFBFAAigIqkBFgoJCLFgJCLCAkWLCAkI1CAkIsWAzFiwgJCNQgMxYsWAzCNQgMwjUIDMWLFgMwjUIDMI1CAxCNQgMwjUIDMI1CAxCNQgMwjUSAzCNQgMxI1CAzCLCAzCNRICRI1EBIjUAZgsAZFARI0gIKAiKAgoCgoIooIKACgAoAKAiqQEixSAkWLCAkI1CAkI1CAkIsWAkIsWIMxYsBUhGgozCNEKJCLCFEhFhCiQiwhRIkahCjMI0FGYkaIDMI1CCMQjUIozEjUIDMSNQgMxI1CAzCLCAzCLCAzBQGYKAiNICI0gIKgIKAgAKKACgAoAKACgAoAKAQiqCQiqCRYLEEiwUVIKRAFiwGYsUQSEWKCQikBIRYAkIoCQikBIRYAkSNAMwiwBmDSRREaiQEiRoUZiRogMxI0RUZiRpASI0gIjSAyNIDIoCIoCIoCI0gILABRQRQAUAFFBFFBFFAFAFABRUVFBAWCgkUVBFAAURUUAAAABQAAAAAQCAIKAgqCIKKMwigMioogooyjSCIjSKIigMigMioCCoCCoCCoCCgKACgAKAKCgAoCooCgAoqKAICigAqACoAAoAKAAAAAAAAAAAAAAAAACCKAiKKiIoDIqKCKKMioCI0ioiKAiKAyKgIKgIKgAACgAqKAqKAoAoAKCgKiooqKAqKgKioCpigKiooABgAoAAAAAAAKACAAAAAAAAAAiaAIgCiAKIGgIAoiKioIqAIqAgqAgAIAAAAACgAoAKACgAq4gCqiooqKAqCCqioCoAqoIKAKAAACgAAAAAAAAAAAAAAAgCAAggAogIoAAgCiGiKgioAmqmgIqAIqAIqAAAAAoAKACgAoAKIoKIoKrKoqgICoA0IIKqAKIoKIIKIooAAAAAAAAAAAAIAqAICCgCAqCKAAAIoIqAICoIACKgCKgCKgCKgAAAACooCooCoAqoAqoAqoAoioKIoqiKAqCCiANCUQURaCiAKIApUpQWlSlBaVKUFEoCiAKgAAgKhUUUQAAAEFAQABFQBAAQAAEABAAQAAAARQAAURQURQUQBVQBQAURQUQBVQQURRVEKCiKgKgCiALSpSgqsgNDJQaGQFKgC0SgKIAAACFBRBQEAAQRUBQEAAQAABAAQAEVAAAAAQAFEUAAFEUFEAVUAURQUQBVQBRAGhAFEAVUogpUBVEKCqyoKJQFEAUQBRAFQSgpUAUQBUEEUQUVAAEAAQFQAAQAABAABAAAAQAAARQAAURQAAUQBVZ/JN3dFb3cwza5rQbVnPr1RFEUBUAWiAKqALRAFEAVUAWlQBRAFEAUQBRAFpUAAQFEAWiAAIC0QBUAAQBUAAQAAAQAAABAAAAQAEUBUAUE3QUuYzdEWLSoCqICKIKKubEAbzc1XNc+vQbEWiFVAFEAUqVQFQBRAFEAUQBaVKUFpUpQUQBRAFEAAAKJQFEAVAAEAUQABAUQAAABAVAABAVAAABAAUQBTf2AMjSSIqKgKoigAAACCoA1mxc3NZAbGc+vVVFVKAtEAUQBRAFAAClAClAClACgAICiAKIApUAAoAIAogAFAAABAFQAAQFQAAAEAAAEVAFEUBUAUQA3PEaTcoqBwRQAFEAURQAAFzYgDebmjC59eiNAKgqFBRKAogCiAKIAogCiAKIAohQVCgAAAAAICiUBUAAAASgKgAAACAAAAICiAAAAACoAoigAAJuRQEDc8RFUAUoAAAAUBSoAtnGs3NYBG1YzfWlRRAFEAUQBRAFEAUQBRAFEAAACgAAAJQFEAVAAAAEAVAAAABAVAAAAAAEAUAAAAABUAWiAKblRQZ4NdZ3IilAFUQEUAAAAAFKgDWbVYWzqo0IAogCiAKIAogCiAKlACgAAAAgKIAogC1AAAABAUQAAAAAAAAAABAAAAUQBQAAAAAAKAACbngpuIoIAohQUQBQAAAAFD+Ln0iA2M2KItKgC0qAKIAqAAAAAABQAABAFKgCoAAAAUAAAAABAUQAAAAAEAURQAAAAFQBRCgoigAAFADqcUBAngigAAAACgABSgBQAXNVksEaEAUQBRAAAAAACgBQAAAAAAAAAEBRKAFAAAAAAEBRAAAAAAAFEAUSqAAAAAAAACiAKm5QoIKnBQABUAUQBRAFEAUQA/i1AGhmxbRFAAAAAAAAEAUSgKIAAAAAAAAAAlBRAAAAAAAEVAFEUAAAAAAAAFEAUQBRKoAAAAAAJBU3ABAFAFApQApQApQApQApQWiJYI0FoAAAAAAAAAAACUFEAVKAAAAAAAAAAICiAAAAAgAC0QFUQBQAAAAAAAAAAAKUAUQA/WpxQECTgKAAAAAAAAAAAALm+oCNDPFBRAClAAAAAAAAAAAAAAQBSoAACAAAAoIoAAAAAAAAAAgAC0qAqiAKIAoFAAAAAAATcUBKG4nAUQFUQBRAFEBFEBVKgC0IogAAAABQBAFEAWlQAAEAAABQAAAAAAAECpRFpWatBVZUVRAFAoAAAAAAAAAAAAgAAAAAAAAAKgqbgAUAAFABAFgAAAAgAAAAAAAKAAAAAAAABQAQBRAQAAABmpUAWiFBrFZxQaEUUAEAAUQBRAVRAFAAClAAAAAAAAAAAAA1njQCBuTiCqGZV4ISAAAAAAAAAABSgAACAKIAogIAAAAAAAAACgAOYAgAAtQBpWauA0IoAAoAIAAAAAAAAAAAAKgCiAKICrSoAtKgC1NwAWlQBRAFEBFQAAAAAAAAAAAAAAAABQAAAACgAAAA5gCAAAACooKrKg0IooAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAACgAAAAAAAAAAAAAAABQAAEAAAAAAcwAAAAAAAURQVWVBVQBQAAAABSgAAAAAAAAAAABQACgBSgBSgAAAAAAAAAAFACgAACAAAAAAAAAAAAAAAAOYAAAAAAAAAKIoKrKgqsqCgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACgAAgDAAgAAAAAAAAAAqANCKCiKCgAAAAAAAAAAAAAAAAAAgKCAoAAAAAAAAAAAAAAAAAoAAAAIUFEAAAABAAGAAAAAAAAAAAAAAUAFABQBVAAAEAAAARQBFAEABUAAAD/ABQAABFAAAAAAAEUBUUAAAAAEAAAQAAAAAAAAAB//9k="
    }
]

}

如果上面提到的功能不可用，我想我将不得不使用一个外部PHP文件，因为我的配置程序代码完全是用JS编写的

我找到了下面的代码，但我现在需要一个函数将我的base 64图像发送到PHP函数，并检索生成的URL，将其包含在我的JSON请求中

/**
 * Save the image on the server.
 */
function save_image( $base64_img, $title ) {

    // Upload dir.
    $upload_dir  = wp_upload_dir();
    $upload_path = str_replace( '/', DIRECTORY_SEPARATOR, $upload_dir['path'] ) . DIRECTORY_SEPARATOR;

    $img             = str_replace( 'data:image/jpeg;base64,', '', $base64_img );
    $img             = str_replace( ' ', '+', $img );
    $decoded         = base64_decode( $img );
    $filename        = $title . '.jpeg';
    $file_type       = 'image/jpeg';
    $hashed_filename = md5( $filename . microtime() ) . '_' . $filename;

    // Save the image in the uploads directory.
    $upload_file = file_put_contents( $upload_path . $hashed_filename, $decoded );

    $attachment = array(
        'post_mime_type' => $file_type,
        'post_title'     => preg_replace( '/\.[^.]+$/', '', basename( $hashed_filename ) ),
        'post_content'   => '',
        'post_status'    => 'inherit',
        'guid'           => $upload_dir['url'] . '/' . basename( $hashed_filename )
    );

    $attach_id = wp_insert_attachment( $attachment, $upload_dir['path'] . '/' . $hashed_filename );
}

实际上，我正在努力链接JS和PHP

//This function is called when add to cart or purchase button are pressed 
function apicrpr(state) {
//This read form values to use is later in the API request

  var longueur = document.getElementById("longueure").value,
    largeur = document.getElementById("largeure").value,
    épaisseur = document.getElementById("épaisseur").value,
    quantité = document.getElementById("quantité").value,
    matériaux = document.getElementById("matériaux").value,
    mac = document.getElementById("matériaux"),
    macval = mac.options[mac.selectedIndex].text,
    final = document.getElementById("prxxx").innerHTML,
    finalp = parseFloat(final.match(/\d+(?:\.\d+)?/g));

//Return my base 64 image as displayed in the JSON above 
    var canvas = takeshot();

//Create request 
    if (window.XMLHttpRequest){
         xmlhttp = new XMLHttpRequest();
     }

    else{
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
//The actual url of the PHP code written above 
     var PageToSendTo = "https://websiteadress.com/wp-includes/uploadimg.php?";
     var MyVariable = canvas;
     var VariablePlaceholder = "base64_img=";
     var UrlToSend = PageToSendTo + VariablePlaceholder + MyVariable + "&title=Product_Image";
//I would like my PHP code to execute an get the url of my image back but I'm kinda lost here 
     xmlhttp.open("POST", UrlToSend, false);
     xmlhttp.send();

我希望我已经足够清楚了 非常感谢您的帮助