WP Forms首次上传图片无法获取URL，JSON解析错误求助

问题根源 #

首次上传触发change事件时，WP Forms的文件上传字段尚未完成后端处理，字段值还不是完整的JSON格式，导致JSON.parse抛出"Unexpected end of JSON input"错误。二次上传时，字段已存在有效JSON或后端处理速度达标，因此能正常解析。

修复方案 #

方案1：延迟执行解析逻辑 #

给解析操作添加短延迟，等待WP Forms完成字段值更新：

logoObj.addEventListener('change', function() {
  setTimeout(() => {
    const fieldValue = document.getElementById('wpforms-59-field_39').value;
    if (!fieldValue) return;
    
    try {
      const parsed = JSON.parse(fieldValue)[0].url;
      console.log(parsed);
      // 此处编写Logo显示逻辑
    } catch (e) {
      console.error('JSON解析失败:', e);
    }
  }, 500); // 可根据服务器响应速度调整延迟，建议300-1000ms
});

方案2：监听WP Forms上传完成事件 #

WP Forms文件上传完成后会触发wpforms_upload_complete自定义事件，监听该事件精准处理：

document.addEventListener('wpforms_upload_complete', function(event) {
  // 确认目标字段为field_39
  if (event.detail.fieldId === '39') {
    const fieldValue = document.getElementById('wpforms-59-field_39').value;
    if (fieldValue) {
      const parsed = JSON.parse(fieldValue)[0].url;
      console.log(parsed);
      // 编写Logo显示逻辑
    }
  }
});

// 保留原change事件作为降级处理（可选）
logoObj.addEventListener('change', function() {
  const fieldValue = document.getElementById('wpforms-59-field_39').value;
  if (fieldValue) {
    try {
      const parsed = JSON.parse(fieldValue)[0].url;
      console.log(parsed);
    } catch (e) {
      // 忽略首次解析错误，等待上传完成事件
    }
  }
});

方案3：先验证字段值再解析 #

解析前判断值是否为有效JSON，避免报错：

logoObj.addEventListener('change', function() {
  const fieldValue = document.getElementById('wpforms-59-field_39').value;
  if (!fieldValue) return;
  
  // 简单校验JSON格式
  if (fieldValue.startsWith('[') && fieldValue.endsWith(']')) {
    try {
      const parsed = JSON.parse(fieldValue)[0].url;
      console.log(parsed);
    } catch (e) {
      console.error('JSON格式异常:', e);
    }
  } else {
    // 上传中重新触发事件重试
    setTimeout(() => {
      this.dispatchEvent(new Event('change'));
    }, 300);
  }
});

注意事项 #

• 延迟时间需根据自身服务器响应速度测试调整
• 自定义事件方案需确保WP Forms版本支持（主流新版本均兼容）
• 加入try-catch可避免解析错误阻断后续代码执行

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