Ant Design Upload组件首次上传失效，二次上传正常问题求助

根据描述，首次使用Ant Design Upload组件上传时无网络请求、进度卡在0%，但二次上传正常，结合代码和现象，可能的原因及解决方法如下：

1. 状态更新时机打断上传逻辑 #

你的handleUpload函数在info.file.status === 'uploading'时调用setUploading(true)，这会触发组件重新渲染——而Upload组件的子元素uploadButton依赖uploading状态，状态更新会导致uploadButton重新渲染，可能中断Upload内部未完成的初始化或请求发送流程。

解决方法：
将setUploading(true)的逻辑移到beforeUpload钩子中（上传开始前就设置加载状态），避免在onChange中触发状态更新打断上传：

// 修改Upload组件的beforeUpload属性
beforeUpload={(file) => {
  setUploading(true);
  return true;
}}

同时修改handleUpload，移除uploading分支的状态更新：

const handleUpload = (info) => {
  console.log(info);
  if (info.file.status === 'done') {
      setUploading(false);
      setRecipe({
          ...recipe,
          mainImage: info.file.response.fileUrl
      })
      return;
  }
  // 补充上传失败的处理逻辑
  if (info.file.status === 'error') {
      setUploading(false);
      console.error('上传失败:', info.file.error);
  }
};

2. 条件渲染导致组件实例不稳定 #

Upload组件处于recipe.mainImage的条件渲染分支中，若组件没有唯一标识，React可能在状态更新时复用或重置组件实例，干扰上传逻辑。

解决方法：
给Upload组件添加唯一key属性，确保组件实例的稳定性：

<Upload
    key="main-image-upload" // 添加唯一key
    listType="picture-card"
    showUploadList={false}
    withCredentials
    action="http://127.0.0.1:8000/http/upload-file?path=images/"
    accept="image/*"
    beforeUpload={(file) => {
      setUploading(true);
      return true;
    }}
    onChange={handleUpload}
>
    {uploadButton}
</Upload>

3. withCredentials场景下的CORS配置问题 #

你启用了withCredentials，若后端CORS配置不正确，首次请求的OPTIONS预检可能被浏览器拦截，导致上传请求无法发送；而二次请求可能因浏览器缓存了预检结果而正常执行。

检查要点：

• 后端需设置Access-Control-Allow-Credentials: true
• Access-Control-Allow-Origin不能设为*，需指定前端的具体域名（如http://localhost:3000）
• 确保后端允许POST请求及上传所需的请求头

4. beforeUpload同步返回值的时序问题 #

虽然Ant Design文档说明beforeUpload返回true会触发自动上传，但部分场景下同步返回可能存在时序问题，换成异步Promise返回可避免：

beforeUpload={(file) => {
  setUploading(true);
  return Promise.resolve(true);
}}

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