如何区分Cloudinary上传组件的「完成」与「关闭(X)」事件实现跳转

问题说明 #

• 已实现基于Node.js+JavaScript的Cloudinary Upload Widget，可正常上传图片至Cloudinary并将图片数据存入独立数据库。
• 需求：用户点击组件内的「Done」按钮完成上传后触发页面跳转。
• 当前问题：点击「Done」与点击右上角「X」关闭组件均触发相同的close事件，无法区分；而success事件在多图上传时会针对每张图片触发多次，不能用来触发跳转。
• 错误场景：用户打开组件后直接点击「X」关闭，现有逻辑会错误触发页面跳转。

解决方案 #

核心思路是通过跟踪是否存在成功上传的图片，来区分close事件的触发来源。具体实现如下：

修改后的代码 #

// 跟踪是否有成功上传的图片，初始为false
let hasSuccessfulUploads = false;

const processResults = async (error, result) => {
  if (error) {
    console.log(error);
    return;
  }

  // 每张图片上传成功时标记状态
  if (result.event === 'success') {
    hasSuccessfulUploads = true;
    // 发送图片数据到后端存储
    const serverResponseData = await sendImageDataToServer(result);
    // 这里可以添加后端响应的处理逻辑
  }

  // 处理关闭事件
  if (result.event === 'close') {
    const dataDivResults = document.getElementById('dataDivResults');
    if (hasSuccessfulUploads) {
      // 存在成功上传，触发页面跳转逻辑
      dataDivResults.dataset.uploadResult = 'success';
    } else {
      // 无上传操作，执行刷新页面或其他逻辑
      window.location.reload();
    }
    // 重置状态，避免影响下一次Widget打开
    hasSuccessfulUploads = false;
  }
};

const launchWidget = () => {
  console.log('FE => Launching widget');
  // 每次打开Widget前重置状态
  hasSuccessfulUploads = false;
  const myWidget = window.cloudinary.createUploadWidget(options, processResults);
  myWidget.open();
};

逻辑说明 #

1. 状态跟踪：声明hasSuccessfulUploads变量，初始为false，只要有图片上传成功（触发success事件），就将其设为true。
2. 关闭事件判断：当close事件触发时，根据hasSuccessfulUploads的值区分操作：
   • 若为true：说明用户是上传完成后点击「Done」关闭，执行跳转逻辑。
   • 若为false：说明用户未上传任何图片直接关闭组件，执行刷新页面或其他对应逻辑。
3. 状态重置：每次打开Widget和处理完close事件后重置变量，确保每次操作的状态独立。

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