react antd图片上传

你可以使用 Ant Design 的 Upload 组件来实现图片上传功能。

首先需要安装 antd 和 axios：

npm install antd axios

然后在组件中引入 Upload 和 message 组件：

import { Upload, message } from 'antd';

接下来，定义一个组件状态来保存上传文件的列表：

state = {
  fileList: [],
};

然后在 Upload 组件中设置一些属性，如 action 表示上传的地址、accept 表示接受的文件类型、onChange 表示文件列表改变时的回调函数：

<Upload
  action="/api/upload"
  accept=".jpg,.png,.gif"
  fileList={this.state.fileList}
  onChange={this.handleUploadChange}
>
  <Button icon={<UploadOutlined />}>选择文件</Button>
</Upload>

最后，实现 handleUploadChange 回调函数来处理文件上传：

handleUploadChange = ({ fileList, file }) => {
  if (file.status === 'done') {
    message.success(`${file.name} 上传成功！`);
  } else if (file.status === 'error') {
    message.error(`${file.name} 上传失败！`);
  }

  // 保存文件列表
  this.setState({ fileList });
};

完整代码如下：

import React from 'react';
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import axios from 'axios';

class ImageUpload extends React.Component {
  state = {
    fileList: [],
  };

  handleUploadChange = ({ fileList, file }) => {
    if (file.status === 'done') {
      message.success(`${file.name} 上传成功！`);
    } else if (file.status === 'error') {
      message.error(`${file.name} 上传失败！`);
    }

    // 保存文件列表
    this.setState({ fileList });
  };

  handleUpload = async (file) => {
    // 创建 FormData 对象
    const formData = new FormData();
    formData.append('file', file);

    try {
      // 发送 POST 请求
      const response = await axios.post('/api/upload', formData);

      // 打印上传成功的信息
      console.log(response.data);
    } catch (error) {
      // 打印上传失败的信息
      console.log(error.message);
    }
  };

  render() {
    return (
      <Upload
        action={this.handleUpload}
        accept=".jpg,.png,.gif"
        fileList={this.state.fileList}
        onChange={this.handleUploadChange}
      >
        <Button icon={<UploadOutlined />}>选择文件</Button>
      </Upload>
    );
  }
}

export default ImageUpload;

注意，这里的 action 属性需要传入一个处理上传的函数，可以使用 axios 发送 POST 请求将文件上传到服务器。在 handleUploadChange 回调函数中，我们可以根据上传文件的状态显示不同的提示信息。