react antd-img-crop ImgCrop Upload图片裁剪不生效

风顶

于 2024-07-30 16:24:06 发布

阅读量47

点赞数 1

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/qq_38865022/article/details/140799878

版权

原来的代码

<ImgCrop
  aspect={800 / 800}
  rotationSlider
  showReset
  modalOk="确定"
  modalCancel="取消"
  onModalCancel={handleOnModalCancelTemplateCoverImage}
>
  <Upload
    disabled={isBanEdit}
    listType="picture-card"
    accept=".jpg,.png,.jpeg,"
    beforeUpload={beforeUpload}
    onChange={handleChangeTemplateCoverImage}
    multiple={false}
    maxCount={1}
    showUploadList={false}
  >
    <div className={styles['upload-box']}>
      <img
        src={addHPng}
        style={{ width: '20px', height: '20px' }}
      ></img>
      <div
          style={{
            position: 'absolute',
            left: '0px',
            bottom: '-20px',
            margin: 'auto',
            display: 'block',
            color: 'rgba(153, 153, 153, 1)',
          }}
        >
          建议尺寸：800 x 800 像素
        </div>
      )}
    </div>
  </Upload>
</ImgCrop>

将onChange事件改成customRequest事件即可。

<ImgCrop
  aspect={800 / 800}
  rotationSlider
  showReset
  modalOk="确定"
  modalCancel="取消"
  onModalCancel={handleOnModalCancelTemplateCoverImage}
>
  <Upload
    disabled={isBanEdit}
    listType="picture-card"
    accept=".jpg,.png,.jpeg,"
    beforeUpload={beforeUpload}
    customRequest={handleChangeTemplateCoverImage}
    multiple={false}
    maxCount={1}
    showUploadList={false}
  >
    <div className={styles['upload-box']}>
      <img
        src={addHPng}
        style={{ width: '20px', height: '20px' }}
      ></img>
      <div
          style={{
            position: 'absolute',
            left: '0px',
            bottom: '-20px',
            margin: 'auto',
            display: 'block',
            color: 'rgba(153, 153, 153, 1)',
          }}
        >
          建议尺寸：800 x 800 像素
        </div>
      )}
    </div>
  </Upload>
</ImgCrop>