PhoneGap(Vue+Framework7)调用WordPress REST API传图报500错误求助

你遇到的核心问题是直接把Base64字符串作为文件附加到FormData里，不符合WordPress媒体API的接收规范。WP的/wp/v2/media端点期望接收标准的File或Blob对象，而非纯Base64文本，这也是触发500内部服务器错误的主要原因。另外请求头的配置也有几处需要调整，下面是具体的解决思路和修改方案：

关键问题分析与修复步骤 #

• 不要手动设置Content-Type: multipart/form-data：当使用FormData作为请求体时，Axios会自动生成包含正确边界（boundary）的Content-Type头，手动设置反而会丢失边界信息，导致服务器无法解析表单数据。
• 将Base64字符串转换为Blob/File对象：WP媒体API需要识别出这是一个文件而非普通字符串，所以必须先把Base64转成Blob，再包装成File对象。
• 移除不必要的请求头：Content-Disposition不需要在请求头中设置，文件名可以通过File对象的参数传递；Cache-Control如果没有特殊需求也可以简化。

修改后的完整代码示例 #

const apiHost = 'https://example.com/wp-json';
// 1. 把Base64字符串转换为Blob对象
function base64ToBlob(base64Str) {
  // 分离Base64的元数据和实际内容
  const parts = base64Str.split(';base64,');
  const contentType = parts[0].split(':')[1];
  const byteCharacters = atob(parts[1]);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    const slice = byteCharacters.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: contentType });
}

// 2. 转换并创建FormData
const imageBlob = base64ToBlob(self.images[0]);
// 包装成File对象，第二个参数是自定义文件名
const imageFile = new File([imageBlob], 'uploaded_image.png', { type: imageBlob.type });

let image_form_data = new FormData();
image_form_data.append('file', imageFile);

const imagesOptions = {
  method: 'post',
  url: apiHost + '/wp/v2/media',
  headers: {
    "Accept": "application/json",
    "Authorization": 'Bearer ' + self.jwToken,
    // 移除手动设置的Content-Type和Content-Disposition
    "Cache-Control": "no-cache" // 可选，根据需求保留
  },
  data: image_form_data
};

axios(imagesOptions)
  .then((imgResp) => {
    console.log('上传成功:', imgResp);
  })
  .catch((error) => {
    console.error('上传失败:', error.response ? error.response.data : error.message);
  });

额外检查点 #

1. JWT权限验证：确保你的JWT令牌对应的用户拥有upload_files权限（比如编辑者、管理员角色），权限不足也会导致服务器错误。
2. 服务器PHP配置：除了WP后台设置的上传大小，还要检查PHP配置中的post_max_size和upload_max_filesize，两者都需要设置为不小于16M（比如post_max_size = 20M，upload_max_filesize = 16M），否则会触发隐性的上传失败。
3. WP REST API调试：可以启用WP的调试模式（在wp-config.php中设置define('WP_DEBUG', true);和define('WP_DEBUG_LOG', true);），查看wp-content/debug.log中的具体错误信息，这能帮你更快定位问题。

之前你用自定义端点结合FileReader/Blob能成功，本质就是因为正确处理了文件对象，现在只需要把这个逻辑迁移到官方端点的请求中即可。

内容的提问来源于stack exchange，提问作者muka.gergely