React.js中使用Uppy搭配AWS预签名URL上传文件报错如何解决

你遇到的报错核心是getUploadParameters方法在某些场景下返回了undefined，不符合Uppy要求的返回格式，排查方向和修复方案如下：

• 你的catch分支没有返回值，也没有抛出错误：只要请求出现网络错误、跨域、DNS解析失败等问题，就会进入catch逻辑，你只打印了错误日志，没有返回任何内容，Uppy就会拿到undefined触发报错。修复时可以直接在catch里抛出错误，Uppy会捕获错误作为上传失败的原因，方便定位问题。
• 没有处理接口返回的非2xx状态码：fetch的默认机制是仅当网络层面请求失败时才进入catch，如果接口返回400、401、500等业务错误状态码，依然会进入正常的then逻辑，这时候你直接解析JSON拿到的可能不是预期的预签名参数结构。需要先判断响应状态是否正常，异常时直接抛出错误。
• 检查预签名接口返回结构：确认你的后端接口返回的JSON数据中确实包含method和url字段，没有大小写拼写错误（比如写成Method、URL）。
• 检查请求参数合法性：确认拼接URL用到的props.asset.id、file.id、file.type这几个变量不会出现undefined的情况，否则会导致请求路径不符合后端要求，触发接口报错。

修改后的参考代码：

const uppy = useUppy(() => {
  return new Uppy({ autoProceed: true }).use(AwsS3, {
    getUploadParameters(file) {
      return fetch(
        `${process.env.baseUrl}/api/asset/presign/upload?assetId=${props.asset.id}&key=${file.id}&contentType=${file.type}`
      )
      .then((res) => {
        // 校验响应状态
        if (!res.ok) {
          throw new Error(`预签名接口请求失败，状态码：${res.status}`)
        }
        return res.json()
      })
      .then((data) => {
        // 校验返回参数是否存在
        if (!data.method || !data.url) {
          throw new Error(`预签名接口返回参数缺失，返回内容：${JSON.stringify(data)}`)
        }
        return {
          method: data.method,
          url: data.url,
          fields: {},
          headers: {
            "Content-Type": file.type,
          },
        };
      })
      .catch((err) => {
        console.log("预签名请求错误: ", err);
        // 抛出错误，让Uppy捕获处理，避免返回undefined
        throw err
      });
    },
  });
});

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