阻止 React Ant Design Upload 组件自动发布文件

在使用 React Ant Design Upload 组件时，可能会遇到自动发布文件的问题。默认情况下，组件会在上传完成后自动发布文件，并且返回发布的文件链接。但是，有时候我们希望不自动发布文件，或者在上传完成后再决定是否发布。

解决方案

React Ant Design Upload 组件提供了一个 beforeUpload 属性，可以在上传之前进行一些自定义的操作。我们可以在这个方法中阻止自动发布文件。

首先，我们需要定义一个状态来保存上传的文件列表：

import React, { useState } from 'react';
import { Upload } from 'antd';

function App() {
  const [fileList, setFileList] = useState([]);

  const handleUpload = () => {
    // TODO: 处理上传逻辑
  }

  return (
    <Upload
      fileList={fileList}
      beforeUpload={(file) => {
        setFileList([...fileList, file]);
        return false; // 阻止自动上传和发布
      }}
      >
      <button onClick={handleUpload}>上传文件</button>
    </Upload>
  );
}

在 beforeUpload 方法中，我们将上传的文件添加到状态中，并返回 false，阻止自动上传和发布。

在上传完成后，我们可以手动触发发布操作，并获取发布的文件链接。例如，我们可以在上传按钮的点击事件中进行处理：

import { message } from 'antd';
import { uploadFile, publish } from './api';

function App() {
  const [fileList, setFileList] = useState([]);

  const handleUpload = async () => {
    try {
      const urls = await Promise.all(
        fileList.map((file) => uploadFile(file)),
      );
      const publishedUrls = await Promise.all(
        urls.map((url) => publish(url)),
      );
      console.log('发布成功，文件链接为：', publishedUrls);
      message.success('上传并发布成功！');
    } catch (error) {
      console.error('上传并发布失败：', error);
      message.error('上传并发布失败！');
    } finally {
      setFileList([]);
    }
  }

  // TODO: render 方法

  return (...);
}

在这个示例中，我们假设有两个异步操作 uploadFile 和 publish，分别用来上传文件和发布文件。在点击上传按钮时，我们先使用 Promise.all 方法上传所有的文件，并将上传成功后的文件链接保存到 urls 数组中。然后，我们使用 Promise.all 方法发布所有的文件，并将发布后的文件链接保存到 publishedUrls 数组中。最后，我们输出发布成功的文件链接，并弹出提示框。如果上传或发布失败，则输出相应的错误信息。

结论

通过使用 beforeUpload 方法和手动发布的方式，我们可以完全控制上传和发布的流程，并按需发布文件。这种方式虽然比较繁琐，但更加灵活，适用于一些特定的业务场景。