Laravel Nova 4中如何实现图片选中后、上传前的预览功能

官方推荐最简方案 #

Laravel Nova 4 原生Image字段已经内置上传前即时预览能力，不需要额外编写JavaScript代码，你当前的配置没有触发预览，是因为缺少preview()回调配置。
修改字段配置如下即可自动实现选中图片后、提交表单前的预览效果，同时编辑已有资源时也会显示已上传图片的预览：

// App/Nova/Image.php
public function fields(NovaRequest $request)
{
    return [
        ID::make()->sortable(),
        Image::make('image')
            ->disk('s3')
            ->path('s3-uploads/event_images')
            ->acceptedTypes('image/*')
            // 新增预览配置
            ->preview(function ($value, $disk) {
                // 编辑态返回S3临时访问地址，新增态前端会自动读取本地文件生成预览
                return $value ? $this->image->temporaryUrl() : null;
            }),
    ];
}

配置完成后，Nova内置的前端组件会自动监听文件选择事件，选中符合要求的图片后，会自动在文件选择框下方渲染缩略预览，样式和Nova后台整体风格统一，版本升级不会失效。

自定义JavaScript实现方案 #

如果你需要自定义预览样式、增加额外交互（比如自定义预览尺寸、添加尺寸校验提示、裁剪参考线等），可以通过Nova官方允许的资产注入方式加载自定义JS，不需要修改vendor核心文件。

• 首先创建自定义JS文件，路径为public/vendor/nova/js/custom-image-preview.js，写入监听逻辑：

// 等待Nova前端SPA加载完成
document.addEventListener('nova:loaded', () => {
    // 用事件委托绑定文件选择事件，兼容SPA页面切换
    document.body.addEventListener('change', (e) => {
        const fileInput = e.target.closest('input[type="file"][accept*="image/*"]');
        if (!fileInput) return;

        const selectedFile = fileInput.files[0];
        if (!selectedFile || !selectedFile.type.startsWith('image/')) return;

        // 清除旧预览
        const oldPreview = fileInput.closest('.file-field')?.querySelector('.custom-preview');
        oldPreview?.remove();

        // 读取本地文件生成预览
        const reader = new FileReader();
        reader.onload = (event) => {
            const previewNode = document.createElement('div');
            previewNode.className = 'custom-preview mt-3';
            previewNode.innerHTML = `
                <img src="${event.target.result}" 
                     style="max-width: 260px; max-height: 260px; border-radius: 6px; border: 1px solid #e5e7eb;"
                     alt="图片预览"
                >
            `;
            fileInput.closest('.file-field')?.appendChild(previewNode);
        };
        reader.readAsDataURL(selectedFile);

        // 监听文件取消操作，清除预览
        fileInput.addEventListener('click', () => {
            setTimeout(() => {
                if (!fileInput.files.length) {
                    fileInput.closest('.file-field')?.querySelector('.custom-preview')?.remove();
                }
            }, 0);
        });
    });
});

• 在app/Providers/NovaServiceProvider.php的boot方法中注册该JS文件，让Nova后台自动加载：

use Laravel\Nova\Nova;
use Laravel\Nova\Events\ServingNova;

public function boot()
{
    parent::boot();

    Nova::serving(function (ServingNova $event) {
        Nova::script('custom-image-preview', public_path('vendor/nova/js/custom-image-preview.js'));
    });
}

注意：不要直接修改vendor目录下的Nova核心文件，版本升级时文件会被覆盖，上述资产注入方式是官方文档明确支持的扩展方式，兼容性更好。

两种方案优先选择第一种原生配置方案，满足绝大多数常规预览需求，只有需要高度自定义预览交互时再使用自定义JS方案。

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