Javascript 检查控件中的古腾堡媒体上载

我正试图通过媒体库从古腾堡的Inspect Control上传文件。我目前正在JS中使用此代码：

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    ServerSideRender = wp.components.ServerSideRender,
    TextControl = wp.components.TextControl,
    TextareaControl = wp.components.TextareaControl,
    MediaUpload = wp.components.MediaUpload,
    InspectorControls = wp.editor.InspectorControls;

在这里，我注册了块类型：

    registerBlockType( 'myplugin/about-section', {
        title: 'About Section',
        icon: 'megaphone',
        category: 'widgets',
        edit: function( props ) {
            return [
                el( ServerSideRender, {
                    block: 'malinda/about-section',
                    attributes: props.attributes,
                } ),

                el( InspectorControls, {},
                    el( MediaUpload, {
                        label: 'Background Image',
                        value: props.attributes.bgimg,
// I think something need to be done here..
                    } ),
                ),
            ];
        },
        save: function() {
            return null;
        },
    } );

但出于某种原因，它对我不起作用。在控制台中，它给了我以下错误：

错误：缩小反应错误#130；参观 获取完整消息，或使用非小型开发环境获取完整消息 错误和其他有用的警告

当我点击block时，它会说：

编辑器遇到意外错误

---

有人能帮我吗？

您需要为“保存图像”链接添加属性字段。然后您需要添加MediaUpload元素并在单击时添加回调。在保存价值之后。您可以将我的代码集成到您的 决定。我正在将图像选择添加到检查器控制区域

（功能（编辑器、组件、i18n、元素）{
var el=element.createElement；
var registerBlockType=wp.blocks.registerBlockType；
var-InspectorControls=wp.editor.InspectorControls；
var mediaoupload=wp.editor.mediaoupload；
registerBlockType（'designa/image block'{
标题：“图像块”，
描述：“图像块”，
图标：“video-alt3”，
类别：'普通'，
属性：{
mediaURL:{
键入：“字符串”，
来源：'属性'，
选择器：“img”，
属性：“src”，
}
},
编辑：功能（道具）{
var属性=props.attributes；
var onSelectImage=功能（媒体）{
返回props.setAttributes({
mediaURL:media.url
});
};
返回[
el（检查员控制，{键：'检查员'}，
el（组件、面板主体、{
标题：“图像块”，
类名：“图像块”，
是的，
},
el（媒体上传{
onSelect:onSelectImage，
键入：“图像”，
渲染：函数（obj）{
返回el（组件。按钮{
className:'组件图标按钮图像块btn为按钮默认为大'，
onClick:obj.open
},
el（'svg'，{className:'dashicon dashicons edit'，宽度：'20'，高度：'20'}，
el（‘路径’，{d:“M2.251H15.5c.6901.25.561.25v15.5c0.69-.561.25-1.25H2.25C1.5619118.44117.75V2.25C1 1.561 2.251ZM17V3H3V14H14ZM10 6c0-1.1-.9-2-2-2-2.9-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-3-6-6v10c0.55-.45-1-1-3-3-3-1-3-3-2-3-3-2-3-4V3-3-.45-3-3-3-3-4
),
el（'span'，{}，
“选择图像”
),
);
}
}),
),
)
];
},
保存：功能（道具）{
var属性=props.attributes；
返回(
el（‘div’{
className:props.className
},
el（‘img’{
src:attributes.mediaURL
})
)
);
},
} );
} )(
window.wp.editor，
window.wp.components，
window.wp.i18n，
window.wp.element，
);

您可以在本文中查看，如果您通过添加行

define（'SCRIPT\u DEBUG'，true）在
wp config.php
中启用
SCRIPT\u DEBUG
，则可以使用中的代码，您将看到未显示的react错误，这些错误将为您提供更多信息和调试帮助。是否可以通过某种方式调整图像的大小以实现保存功能，从而实现web优化？在选择回调中，您有“媒体”对象，您可以获得图像大小或图像缩略图大小或自定义大小，只需使用console.log（媒体）；看看你能用什么。之后，您可以设置图像缩略图大小或添加自定义图像宽度和样式属性，或添加输入字段以添加样式属性。谢谢，这非常有帮助！