Question

我想知道如何以蚂蚁设计形式使用蚂蚁图像选择器（或任何其他组件）。并且，如果可能的话，我想知道如何调用getValueFromEvent以及如何对其进行更改以使其起作用。

这是我的样品。我认为它挺直的：

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

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

.show-on-desktop{
    display: block;
}
.show-on-phone{
    display: none;
}

@media screen and (max-width: 768px) {
  .show-on-desktop {
    display: none;
  }
  .show-on-phone {
    display: block;
  }
}

我唯一不了解的是如何触发事件？我将感谢您提供的任何文档或链接或...

Answer 1

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

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

Answer 2

下面的技巧应该可以将值设置为 Form.Item 以便在图像裁剪中上传：

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

}

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

Answer 4

您可以使用简单的onChange处理程序。

$('#myModal').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var getID = button.data('id')
  var getAdd = button.data('adress')
  var getCity = button.data('city')
  var getPostCode = button.data('postcode')
  var modal = $(this)
  modal.find('#orderID').text('Order ID = ' + getID)
  modal.find('#Address').text('Address = ' + getAdd + ' , ' + getCity + ' , ' + getPostCode)
})

在蚂蚁设计表单中使用`getValueFromEvent`

4 个答案: