Reactjs 在ant设计表单中使用“getValueFromEvent”

我想知道如何在ant设计表单中使用ant图像选择器（或任何其他组件）。 如果可能的话，我想知道如何调用getValueFromEvent，以及如何将其更改为make in work

这是我的样品。我认为这很直接：

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

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

我唯一不明白的是事件将如何触发？

---

我非常感谢您在代码中使用“customRequest”的任何文档或链接或…，“覆盖默认xhr行为，允许进行额外的自定义并实现您自己的XMLHttpRequest”

---

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

下面的技巧可以将值设置为表单。用于上载内部图像裁剪的项目：

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>
    )

}

导入{
形式，
上传，
}来自‘antd’；
从“antd img作物”进口ImgCrop；
从“axios”导入axios；
常量上传=（道具）=>{
const[form]=form.useForm（）；
const uploadImage=异步选项=>{
const{onSuccess，onError，file，onProgress，category}=options；
const fmData=new FormData（）；
常量配置={
标题：{“内容类型”：“多部分/表单数据”}，
onUploadProgress:事件=>{
常数百分比=数学地板（（事件加载/事件总数）*100）；
onProgress（{percent:（event.loaded/event.total）*100}，文件）；
}
};
fmData.append（“文件”，文件）；
试一试{
const res=等待axios.post(
`${API_DOMAIN}/upload`，
fmData，
配置
);
onSuccess（“ok”，res）；
form.setFieldsValue（{photo:res.data.link}）
}捕捉（错误）{
console.log（“Eroor:”，err）；
常量错误=新错误（“某些错误”）；
onError（{err}）；
}
}
返回(
{fileList.length<1&&'+Upload'}
)
}

您共享的代码示例使用单个文件上载。你能解释一下你想用这个“文件”达到什么目的吗function@poeticGeek实际上我是从antd文档中复制的。我不需要数组部分。我只想使用图像裁剪组件。我添加了一个答案，应该对您有所帮助。如果你不喜欢antd，我建议你上传react。使用起来容易多了。我在博客中提到了如何将它与裁剪库结合使用：我的问题是其他的。如果我删除imgcrop标签，表单将非常有效。我只是想以某种方式设置表单值。哪些值？您的示例在表单中只有一个上载字段。请注意，antd img crop将把裁剪的结果上传到您选择的文件中。是的，我当然想要更新的值。但antd img crop不会将值传递给表单。表单get value from child元素，既然imgcrop是子元素，那么该值将不会传递。从我所看到的（）img crop将使用beforeUpload更改根据裁剪结果选择的文件。除此之外，你不需要做任何事情。如何检查它是否“未通过”？

onFinish={（e）=>{console.log（e）；}}

此部分将记录表单的最终值，并且我的图像部分为空