预览版的 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

来自文档：

预览

回调函数，当点击文件链接或预览图标时执行。

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