Next.js 13 App目录图片上传预览短暂显示后消失问题求助

在Next.js 13的App目录开发带图片预览的上传组件，试过官方文档、YouTube教程里的多种方案，还尝试了react-dropzone库，都没解决问题——上传图片后预览图仅显示不足1秒就消失。

环境版本 #

• Next.js ^13.5.4
• React & React-Dom 18.2.0

组件代码 #

export const ChangeBackgroundImage = () => {

const [files, setFiles] = React.useState<File | null>(null);
const [createObjectURL, setCreateObjectURL] = React.useState<any>(null);
const [src, setSrc] = React.useState<any>(null);

const uploadToClient = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files[0]) {
    const i = event.target.files[0];

    setFiles(i);
    setCreateObjectURL(URL.createObjectURL(i));

    const reader = new FileReader();
    reader.onload = function () {
       if (typeof reader.result === 'string') {
            console.log('Hello World');
            setSrc(reader.result);
        }
        return;
    }
        
    if (filesNew !== null) {
        reader.readAsDataURL(filesNew[0]);
    }
}
};

return (
    <div className={style.change_bg}>
        <h3>Change Background Image</h3>
        <p className={style.change_bg_descP}>
            Select A New Image And Upload It!
        </p>
        <div className={style.change_bg__form_div}>
            <UploadImageSVG width={40} height={40} color={Colors.blue_med} />
            {/* <input 
                type="file"
                accept='image/*'
                name='fileUpload'
                id='fileUpload'
                onChange={( event ) => {
                    // onFileChange(event);
                    if (event?.target?.files?.[0]) {
                        const file = event.target.files[0];
                        if (file && file.type.substring(0, 5) === "image") { setImage(file) }
                        else { setImage(null) }
                    }
                }}
                hidden
            /> */}
            <input type="file" name='image' accept='image/*' onChange={uploadToClient} />
        </div>

        <section className={style.handleImageDeletion}>
            <FolderSVG width={20} height={20} color={Colors.blue_med} />
            {src && <Image src={src} alt='Some Image' width={100} height={100} />}
            {src && console.log(src)}
            {files && files.name}
        </section>
    </div>
)
}

补充说明 #

• 注释掉的input标签测试后同样出现预览图消失的问题
• 使用react-dropzone库实现上传，也存在相同的异常现象

内容的提问来源于stack exchange，提问作者Kr1ss