React使用Uploady调用showFileUpload后如何等待文件选择完成再执行后续代码

uploady.showFileUpload() 本身为同步调用，仅负责唤起系统文件选择窗口，不会阻塞后续代码执行。要等待文件选择流程结束，可通过监听Uploady暴露的文件选择事件，将选择流程封装为Promise，结合async/await实现等待效果，改造后的代码如下：

const handleSubmit2 = useCallback(async (e) => {
  e.preventDefault();
  uploady.showFileUpload();

  // 封装Promise等待文件选择完成/取消
  const selectResult = await new Promise((resolve) => {
    // 监听文件选择完成事件
    const removeSelectListener = uploady.on("FILE_SELECT", (files) => {
      removeSelectListener();
      removeCancelListener();
      resolve({ status: "success", files });
    });
    // 监听文件选择取消事件
    const removeCancelListener = uploady.on("FILE_SELECT_CANCEL", () => {
      removeSelectListener();
      removeCancelListener();
      resolve({ status: "cancel" });
    });
  });

  // 选择流程结束后再执行剩余逻辑
  if (selectResult.status === "success") {
    console.log("选中的文件：", selectResult.files);
    // OTHER CODE
  } else {
    // 可自行处理用户取消选择的分支逻辑
  }
}, [uploady]);

补充说明 #

• 每次触发文件选择时注册的事件监听器，需要在回调执行后立即移除，避免多次触发选择时逻辑冲突
• 如果需要等待文件上传完成后再执行后续逻辑，可将监听事件替换为BATCH_COMPLETE即可
• 若选择文件后的逻辑可和提交动作解耦，也可直接通过useFileSelect钩子全局监听选择事件，把后续逻辑放到钩子回调中：

  import { useFileSelect } from "@rpldy/uploady";
  
  useFileSelect((files) => {
    // 此处写选择完成后的业务逻辑
    // OTHER CODE
  });
  

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