用javascript 写一个 antdesign的Upload组件onChange返回的状态回调判断

Ant Design的Upload组件的onChange返回的状态回调包含了一些重要的属性，我们可以根据这些属性来判断上传状态。

以下是一个示例代码，用于判断上传状态：

import { Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';

const UploadComponent = () => {
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState('');

  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      setLoading(false);
      setImageUrl(info.file.response.url);
      message.success('上传成功！');
    }
    if (info.file.status === 'error') {
      setLoading(false);
      message.error('上传失败！');
    }
  };

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>上传</div>
    </div>
  );

  return (
    <Upload
      name="avatar"
      listType="picture-card"
      className="avatar-uploader"
      showUploadList={false}
      action="/api/upload"
      onChange={handleChange}
    >
      {imageUrl ? (
        <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
      ) : (
        uploadButton
      )}
    </Upload>
  );
};

在这个示例代码中，我们通过useState来保存上传状态，包括loading和imageUrl。在handleChange回调中，我们根据上传状态来更新loading和imageUrl，并显示相应的提示信息。例如，当上传成功时，我们更新imageUrl，并显示一个上传成功的提示信息。

此外，我们还通过Ant Design的Upload组件来实现文件上传。在这个组件中，我们设置了上传的名称、上传类型、上传地址和状态回调等属性。其中，onChange回调中的info参数包含了文件的上传状态、文件名、文件大小、文件类型等信息，我们可以通过这些信息来判断上传状态。

综上所述，我们可以通过onChange返回的状态回调来判断Ant Design的Upload组件的上传状态，并根据上传状态来更新界面和显示提示信息。