在 ant design 表单中使用 `getValueFromEvent`答案

【问题标题】：use `getValueFromEvent` in ant design Form在 ant design 表单中使用 `getValueFromEvent`
【发布时间】：2020-09-05 10:12:23
【问题描述】：

我想知道如何在 ant 设计形式中使用 ant 图像选择器（或任何其他组件）。如果可能的话，我想知道如何调用 getValueFromEvent 以及如何更改它以使其正常工作。

这是我的示例。我认为它很直接：

https://codesandbox.io/s/antd-reproduction-template-forked-lfk7k?file=/index.js

应该以某种方式触发此部分。

const normFile = (e) => {
  console.log("Upload event:", e);
  if (Array.isArray(e)) {
    return e;
  }
  return e && e.fileList;
};

我唯一不明白的是如何触发事件？我会感谢任何文件或链接或...

【问题讨论】：

您分享的代码示例使用单文件上传。你能解释一下你想用这个“normFile”功能实现什么
@poeticGeek 实际上是我从 antd 文档中复制的。我不需要数组部分。我只想使用那个图像裁剪组件。
我添加了一个可以帮助你的答案。如果你不依赖 antd，我推荐 react-uploady。它更容易使用。我在这里写过关于将它与裁剪库一起使用的博客：medium.com/swlh/adding-crop-before-upload-in-react-22dfcf3a95b7

标签： reactjs antd

【解决方案1】：

在您的代码中，您使用的“customRequest”记录如下：“覆盖默认的 xhr 行为，允许额外的自定义和实现您自己的 XMLHttpRequest 的能力”

因此，您需要实现自己的上传行为。如果这不是您的意思，我建议使用所需的道具，例如“动作”（“方法”等）来指定文件应上传到的位置。

【讨论】：

我的问题是别的。如果我删除 imgcrop 标签，表单会很好用。我只是想以某种方式设置表单值。
哪些值？您的示例在表单中只有一个上传字段。请注意，antd-img-crop 会将裁剪的结果上传到您选择的文件中
是的，我当然想要更新的值。但 antd-img-crop 不会将值传递给表单。表单从子元素获取值，现在 imgcrop 是值不会传递的子元素。
据我所知 (github.com/nanxiaobei/antd-img-crop/blob/master/src/index.jsx) img-crop 将使用 beforeUpload 更改选择的带有裁剪结果的文件。除此之外，您不需要做任何事情。你如何检查它“没有通过”？
onFinish={(e) => {console.log(e); }}这部分会记录表单的最终值，我的图片部分为空

【解决方案2】：

以下技巧应该可以将值设置为 Form.Item 以在 Image Crop 中上传：

import {
    Form,
    Upload,
} from 'antd';
import ImgCrop from 'antd-img-crop';
import axios from "axios";

const Upload = (props) => {
    const [form] = Form.useForm();

    const uploadImage = async options => {

        const { onSuccess, onError, file, onProgress, category } = options;

        const fmData = new FormData();
        const config = {
            headers: { "content-type": "multipart/form-data" },
            onUploadProgress: event => {
                const percent = Math.floor((event.loaded / event.total) * 100);
                onProgress({ percent: (event.loaded / event.total) * 100 }, file);
            }
        };
        fmData.append("file", file);
        try {
            const res = await axios.post(
                `${API_DOMAIN}/upload`,
                fmData,
                config
            );
            onSuccess("ok", res);
            form.setFieldsValue({ photo: res.data.link })
        } catch (err) {
            console.log("Eroor: ", err);
            const error = new Error("Some error");
            onError({ err });
        }
    }
    return (
        <Form
            {...formItemLayout}
            form={form}
            name="form_name"
            onFinish={onFinish}
            scrollToFirstError
        >

            <Form.Item
                label="Photo"
                name="photo"
            >
                <ImgCrop rotate>
                    <Upload
                        name={'file'}
                        customRequest={uploadImage}
                        listType="picture-card"
                        onChange={onChange}
                        fileList={fileList}
                        onPreview={onPreview}
                        accept={"image/*"}
                    >
                        {fileList.length < 1 && '+ Upload'}
                    </Upload>
                </ImgCrop>
            </Form.Item>
        </Form>
    )

}

【讨论】：

【解决方案3】：

要将 ImgCrop "antd-img-crop" 与 ant Form 和 Upload 小部件一起使用，并使用 getFieldsValue() 获取值，我编写了此代码。

import React, { useState } from 'react';
import BasePanel          from '@/containers/BasePanel';
import BaseFormComponent  from '@/formcomponents/BaseFormComponent';
import { Upload, Form, Button, Input, Select } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import ImgCrop from 'antd-img-crop';
const { Option } = Select;

const CroppedInput = ({ value = {}, onChange }) => {
    const [fotos, setfotos] = useState([]);

    const triggerChange = (changedValue) => {
        onChange?.({
            fotos,
            ...value,
            ...changedValue,
        });
    };

    const onChange2 = (file) => {
        console.log(file);
        setfotos(file);

        triggerChange({
            fotos: file.fileList,
        });
    };

    return (
        <ImgCrop>
            <Upload listType="picture-card" maxCount={3} onChange={e => onChange2(e)}>
                <UploadOutlined />
            </Upload>
        </ImgCrop>
    );
};


class FormMultiImage extends BaseFormComponent{
    constructor(props) {
        super(props);

        this.checkValidator = this.checkValidator.bind(this);
    }

    checkValidator (_, value) {
        if (value !== undefined && value.fotos.length > 0) {
            return Promise.resolve();
        }
        return Promise.reject(new Error('Por favor seleccione una imagen'));
    };

    render() {
        return (
            <div>
                <Form.Item
                    label={"label"}
                    name={"name"}
                    rules={[
                        {
                            validator: this.checkValidator,
                        },
                    ]}
                >
                    <CroppedInput />
                </Form.Item>
            </div>
        );
    }
}

export default FormMultiImage;

并以您的形式调用它

<Form>
    <FormMultiImage />
</Form>

【讨论】：