如何在Gutenberg前端通过媒体ID用JS获取图片URL及元数据

WordPress没有原生的前端JS函数直接对应PHP的wp_get_attachment_metadata，但可以通过以下两种方案实现需求，覆盖已上传媒体和新上传媒体的场景：

1. 获取已上传媒体的元数据：使用REST API #

WordPress 4.7+自带的REST API提供了媒体查询端点，可直接通过Fetch API调用获取媒体信息。

代码示例 #

async function getMediaMetaById(mediaId) {
  try {
    const res = await fetch(`/wp-json/wp/v2/media/${mediaId}`);
    if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
    const mediaData = await res.json();

    return {
      url: mediaData.source_url,
      width: mediaData.media_details.width,
      height: mediaData.media_details.height,
      altText: mediaData.alt_text
    };
  } catch (err) {
    console.error('获取媒体元数据失败:', err);
    return null;
  }
}

// 使用示例：传入目标媒体ID
getMediaMetaById(123).then(meta => {
  if (meta) {
    console.log('媒体信息:', meta);
    // 这里可直接用元数据做后续操作，比如渲染图片、填充表单等
  }
});

注意事项 #

• REST API默认启用，若被主题/插件禁用，需先恢复启用。
• 私有媒体需要用户登录（前端可通过WordPress的cookie自动验证登录状态），公开媒体无需额外权限。

2. 获取新上传媒体的元数据：使用wp.media API或REST上传端点 #

如果是在前端上传图片（比如后台媒体库或自定义上传按钮），可通过两种方式获取上传后的元数据：

方案A：利用WordPress原生媒体上传器（wp.media） #

适用于后台或已集成wp.media的前端页面：

// 初始化媒体上传器
const mediaUploader = wp.media({
  title: '选择或上传图片',
  button: { text: '确认使用' },
  multiple: false // 单次上传一张
});

// 选中图片后触发回调
mediaUploader.on('select', function() {
  // 将选中的媒体转为JSON格式
  const attachment = mediaUploader.state().get('selection').first().toJSON();
  
  // 提取需要的元数据
  const uploadMeta = {
    url: attachment.url,
    width: attachment.width,
    height: attachment.height,
    altText: attachment.alt
  };

  console.log('新上传媒体信息:', uploadMeta);
  // 这里可把元数据绑定到页面元素或保存到数据库
});

// 绑定上传按钮点击事件
document.querySelector('#custom-upload-btn').addEventListener('click', () => {
  mediaUploader.open();
});

方案B：自定义前端上传（直接调用REST API） #

如果需要完全自定义上传流程，可通过FormData上传到REST端点：

async function uploadMedia(file) {
  const formData = new FormData();
  formData.append('file', file);
  // 可选：提前设置alt文本
  formData.append('alt_text', '自定义图片描述');

  try {
    const res = await fetch('/wp-json/wp/v2/media', {
      method: 'POST',
      headers: {
        'X-WP-Nonce': wpApiSettings.nonce // 需要加载wp-api脚本获取验证用nonce
      },
      body: formData
    });

    if (!res.ok) throw new Error('上传失败');
    const mediaData = await res.json();
    
    // 返回上传后的元数据
    return {
      url: mediaData.source_url,
      width: mediaData.media_details.width,
      height: mediaData.media_details.height,
      altText: mediaData.alt_text
    };
  } catch (err) {
    console.error('上传出错:', err);
    return null;
  }
}

// 使用示例：监听文件选择框
document.querySelector('#file-input').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (file && file.type.startsWith('image/')) {
    const uploadMeta = await uploadMedia(file);
    if (uploadMeta) {
      console.log('上传成功，媒体信息:', uploadMeta);
    }
  }
});

注意事项 #

• 使用wp.media时，需确保页面已加载wp-media脚本（后台默认加载，前端需通过wp_enqueue_script('wp-media')手动加载）。
• 自定义上传时，需要加载wp-api脚本以获取验证用的nonce（wpApiSettings.nonce）。

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