偶发性存在弹窗出来不显示裁剪框的情况

[Karroyling]

关键代码如下：

const beforeUpload = (file, fileList) => {
    if (!file.type || !accept.split(',').includes(file.type)) {
      let tip = accept.split(',')?.map((e) => e.slice(6))
      message.error(`文件类型错误，仅支持上传${tip.join('、')}格式!`)
      return Upload.LIST_IGNORE
    }
    if (!(file.size / 1024 / 1024 < limit)) {
      message.error(`不超过${limit}Mb`);
      return Upload.LIST_IGNORE
    }
  }

const ImgProps = {
    rotationSlider: true, //启用旋转调整
    showGrid: true, //启用缩放调整
    showReset: true, // 重置按钮
    aspect: 1920 / 1080,
    aspectSlider: true,
    modalWidth: '50%',
    quality: 1,
    beforeUpload: (file, fileList) => beforeUpload(file, fileList),
  }

  return <>
    {
      needCrop ?
        <ImgCrop {...ImgProps} {...others.imagProps}>
          <Upload
            {...uploadProps}
            fileList={fileList}
            {...others}
          >
            {fileList.length >= maxCount ? null :
              <div>
                <PlusOutlined />
                <div style={{ marginTop: 8 }} >
                  点击上传
                </div>
              </div>
            }
          </Upload>
        </ImgCrop> :
        <Upload
          {...uploadProps}
          fileList={fileList}
          {...others}
          beforeUpload={(file, fileList) => beforeUpload(file, fileList)}
        >
          {fileList.length >= maxCount ? null :
            <div>
              <PlusOutlined />
              <div style={{ marginTop: 8 }} >
                点击上传
              </div>
            </div>
          }
        </Upload>
    }
  </>

[nanxiaobei]

不能稳定复现的话，不太好处理，最好能提供一个可复现的 demo

[Karroyling]

// 组件
import React, { useEffect, useImperativeHandle, useState, forwardRef } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import { Upload, message, Modal } from 'antd'
import ImgCrop from 'antd-img-crop';

/**
 * 上传组件（后续考虑兼容其他上传模式，暂只用于图片
 * @param {*} props
 * @param {*} refs
 * @returns
 */
function UploadBox(props, refs) {
  let accept = 'image/png,image/jpeg,image/jpg'
  const [fileList, setFileList] = useState([]) // 文件列表

  const beforeUpload = (file, fileList) => {
    if (!file.type || !accept.split(',').includes(file.type)) {
      let tip = accept.split(',')?.map((e) => e.slice(6))
      message.error(`文件类型错误，仅支持上传${tip.join('、')}格式!`)
      return Upload.LIST_IGNORE
    }
    if (!(file.size / 1024 / 1024 < 5)) {
      message.error('不超过5Mb');
      return Upload.LIST_IGNORE
    }
  }
  // 上传组件
  const uploadProps = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange({ file, fileList, event }) {
      if (file.status === 'done') {
        message.success(`${file.name} 上传成功`)
      } else if (file.status === 'error') {
        message.error(`${file.name} 上传失败`)
      }
    }
  }

  const ImgProps = {
    rotationSlider: true, //启用旋转调整
    showGrid: true, //启用缩放调整
    showReset: true, // 重置按钮
    aspect: 345 / 77,
    aspectSlider: true,
    modalWidth: '50%',
    quality: 1,
    beforeUpload: (file, fileList) => beforeUpload(file, fileList),
  }

  return <>
    <ImgCrop {...ImgProps}>
      <Upload
        {...uploadProps}
        fileList={fileList}
        listType="picture-card"
      >
        {fileList.length >= 5 ? null :
          <div>
            <PlusOutlined />
            <div style={{ marginTop: 8 }} >
              点击上传
            </div>
          </div>
        }
      </Upload>
    </ImgCrop>
  </>
}
export default forwardRef(UploadBox)

[Karroyling]

不能稳定复现的话，不太好处理，最好能提供一个可复现的 demo

demo已附上，见上方代码内容 浏览器版本：Google Chrome 版本 113.0.5672.127（正式版本） （64 位）

[nanxiaobei]

demo 代码无法复现描述的 bug

[tech-zjf]

safari浏览器复现概率80%

[nanxiaobei]

需可以 100% 复现的 demo