antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮

antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮

效果图


代码解析

javascript 复制代码
import { Form, Upload, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import { BASE_URL } from '@/utils/request';
const FormItemInputUpload = (props) => {
  const [visble, setVisibel] = useState(false);

  useEffect(() => {
    if (props.edit) {
      setVisibel(true);
    } else {
      setVisibel(false);
    }
  }, [props]);

  const normFile = (e) => {
    if (e.fileList && e.fileList.length == 0) {
      setVisibel(false);
    } else {
      setVisibel(true);
    }
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  const onRemove = (e) => {
    const urls = [props.form.getFieldValue(props.name)]
      .flat()
      .filter((item) => item != e.response.data[0].imageAddress);
    props.form.setFieldsValue({
      [props.name]: urls,
    });
  };
  return (
    <Form.Item
      label={props.label}
      name={props.name}
      valuePropName="fileList"
      getValueFromEvent={normFile}
      rules={
        props?.rules && [
          {
            required: true,
            validator: (_, value, callback) => {
              if (!value || value.length == 0) {
                callback(`请上传${props.label}`);
              } else {
                callback();
              }
            },
          },
        ]
      }
    >
      <Upload
        maxCount={props?.maxCount || 1}
        action={`${BASE_URL}/cdsj-file/upload`}
        data={{ minioCatalogEnums: props.sysType }}
        name="files"
        headers={{ Authorization: localStorage.getItem('token') }}
        listType="picture-card"
        accept=".png,.jpeg,.jpg"
        beforeUpload={(file) => {
          const isPNG =
            file.type == 'image/png' ||
            file.type == 'image/jpg' ||
            file.type == 'image/jpeg';
          if (!isPNG) {
            message.error('请上传图片格式文件!');
          }
          return isPNG || Upload.LIST_IGNORE;
        }}
        onRemove={onRemove}
      >
        {visble ? null : <PlusOutlined />}
      </Upload>
    </Form.Item>
  );
};

export default FormItemInputUpload;



···
//引用
          <FormItemInputUpload
              name="image"
              label="图片"
              edit={props?.fillingForm?.image}
              form={form}
              sysType="SIGNATURE"
              rules
            />
相关推荐
小磊哥er4 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef067 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444010 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆10 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子14 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain921 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人31 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa
KaneLogger33 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
前端风云志1 小时前
JavaScript中如何遍历对象?
javascript
zwjapple7 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker