antd upload组件上传图片

先看效果，代码是这么写的

...
import {Form,Card,Input,Button,Upload,message} from "antd"
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';

...

  const [loading,setLoading]=useState(false);
    const [imageUrl,setImageUrl]=useState("");

...

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

    const handleChange = info => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            console.log("info",info.file.response);

            setImageUrl(info.file.response.file_name);
            setLoading(false);

        }
    };


...

   <Form.Item
                    label="主图">
                    <Upload
                        name="file"
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="/api/index.php/test/upload"
                        onChange={(info)=>handleChange(info)}
                    >
                        {imageUrl ? <img src={imageUrl} alt="avatar" style={
   
   { width: '100%' }} /> : uploadButton}
                    </Upload>
                </Form.Item>


...

 有不明白的可以问我