react+ant框架上传组件+form表单组件实现点击新增表单项上传组件的图片各自独立

谱先生

于 2023-07-13 19:43:04 发布

阅读量249

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/u012269430/article/details/131710240

版权

import React, { useState } from 'react';
import { Form, Row, Col, Select, Input, Upload, Button, Image, Space } from 'antd';
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';

const { Option } = Select;

const eduOptions = [
  { label: '小学', value: 'primary' },
  { label: '初中', value: 'middle' },
  { label: '高中', value: 'high' },
];

const eduNatureOptions = [
  { label: '全日制', value: 'full-time' },
  { label: '非全日制', value: 'part-time' },
];

const EducationForm = () => {
  const [form] = Form.useForm();
  const [fields, setFields] = useState([]);
  const [imageLists, setImageLists] = useState([]);

  const handleUpload = ({ file, field }) => {
    // 处理图片上传逻辑
    const reader = new FileReader();
    reader.onload = (e) => {
      const imageUrl = e.target.result;
      const fieldIndex = fields.findIndex((f) => f.name === field.name);
      setImageLists((prevImageLists) => {
        const newImageLists = [...prevImageLists];
        newImageLists[fieldIndex] = [...(newImageLists[fieldIndex] || []), imageUrl];
        return newImageLists;
      });
    };
    reader.readAsDataURL(file);
  };

  const handlePreview = (file) => {
    // 预览图片
    const previewWindow = window.open();
    previewWindow.document.write(`<img src="${file.url || file.preview}" style="max-width: 100%;" />`);
  };

  const handleRemove = (fieldIndex, imageIndex) => {
    // 移除图片
    setImageLists((prevImageLists) => {
      const newImageLists = [...prevImageLists];
      newImageLists[fieldIndex].splice(imageIndex, 1);
      return newImageLists;
    });
  };

  const onFinish = (values) => {
    // 将imageLists添加到对应字段
    const formData = { ...values };
    fields.forEach((field, fieldIndex) => {
      const fieldName = field.name;
      formData[fieldName].images = imageLists[fieldIndex] || [];
    });

    console.log(formData);
    console.log(imageLists);
  };

  const add = () => {
    const field = {
      name: Date.now(),
    };
    setFields((prevFields) => [...prevFields, field]);
    setImageLists((prevImageLists) => [...prevImageLists, []]);
  };

  const remove = (index) => {
    setFields((prevFields) => {
      const newFields = [...prevFields];
      newFields.splice(index, 1);
      return newFields;
    });
    setImageLists((prevImageLists) => {
      const newImageLists = [...prevImageLists];
      newImageLists.splice(index, 1);
      return newImageLists;
    });
  };

  const renderEducationFields = () => {
    return (
      <>
        {fields.map((field, fieldIndex) => (
          <div key={field.name}>
            <Row gutter={16}>
              <Col span={6}>
                <Form.Item
                  name={[field.name, 'startEndTime']}
                  label="时间"
                  labelCol={{ span: 24 }}
                  rules={[{ required: true, message: '请选择时间' }]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  name={[field.name, 'education']}
                  label="学历层次"
                  labelCol={{ span: 24 }}
                  rules={[{ required: true, message: '请选择学历层次' }]}
                >
                  <Select>
                    {eduOptions.map((option) => (
                      <Option value={option.value} key={option.value}>
                        {option.label}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  name={[field.name, 'nature']}
                  label="学历性质"
                  labelCol={{ span: 24 }}
                  rules={[{ required: true, message: '请选择学历性质' }]}
                >
                  <Select>
                    {eduNatureOptions.map((option) => (
                      <Option value={option.value} key={option.value}>
                        {option.label}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  name={[field.name, 'major']}
                  label="所学专业"
                  labelCol={{ span: 24 }}
                  rules={[{ required: true, message: '请输入所学专业' }]}
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16} justify="end" align="middle">
              <Col span={1}>
                {fields.length > 1 && (
                  <MinusCircleOutlined onClick={() => remove(fieldIndex)} />
                )}
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={24}>
                <Upload
                  name="image"
                  listType="picture-card"
                  fileList={imageLists[fieldIndex]?.map((image, imageIndex) => {
                    return {
                      uid: `${fieldIndex}-${imageIndex}`,
                      url: image,
                    };
                  })}
                  customRequest={({ file }) => handleUpload({ file, field })}
                  onPreview={handlePreview}
                  onRemove={() => handleRemove(fieldIndex)}
                >
                  {imageLists[fieldIndex]?.length >= 3 ? null : (
                    <div>
                      <PlusOutlined />
                      <div style={{ marginTop: 8 }}>上传</div>
                    </div>
                  )}
                </Upload>
              </Col>
            </Row>
          </div>
        ))}
        <Form.Item wrapperCol={{ span: 24 }}>
          {fields.length < 5 && ( // 最多允许上传5个学历信息
            <Button
              type="dashed"
              onClick={add}
              block
              icon={<PlusOutlined />}
              style={{ height: '100px', marginTop: '16px' }}
            >
              添加学历信息
            </Button>
          )}
        </Form.Item>
      </>
    );
  };

  return (
    <Form form={form} onFinish={onFinish}>
      {renderEducationFields()}

      <Form.Item wrapperCol={{ span: 24 }}>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default EducationForm;