预览中的 Ant 设计没有被解雇

Question

我有一个这样的上传按钮。我想在 div 上显示上传图片的预览。因此，我想要预览图像。这就是我试图实现它的方式，但 onPreview 根本没有被解雇。

它是一个功能组件。沙盒=> https://codesandbox.io/s/silly-breeze-2gvewe

function AddAttachment(props) {


   const getBase64 = (file)=>{
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
      });
    }


    const onChange = ({  fileList: newFileList }) => {
      setFileList(()=>(newFileList));
      console.log(fileList);
    

    };


    const handlePreviewImage = async (file)=>{

   
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
 

      setBase64({
        previewImage: file.url || file.preview,
        previewVisible: true,
        previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
      });
    }

 

return (
<UploadButton
                    fileList={fileList}
                    onPreview ={handlePreviewImage}
                    onChange={onChange}
                    aspect={2} listType="picture" />
)

}

Answer 1

来自文档：

onPreview

A callback function, will be executed when file link or preview icon is clicked.

当您尝试单击预览图像或 link 时，您应该会看到 handlePreviewImage 被调用。

预览中的 Ant 设计没有被解雇

Ant design on preview is not getting fired

reactjs

antd