Symfony6.4+OneUpUploaderBundle+Uppy上传后如何展示服务端错误

1. 自定义异常监听捕获ValidationException #

写一个专门的监听类，捕获ValidationException后返回Uppy能识别的错误响应，同时设置非200的HTTP状态码（Uppy只把200系列状态码判定为上传成功）。

示例代码：

// src/EventListener/UploadValidationExceptionListener.php
namespace App\EventListener;

use Oneup\UploaderBundle\Exception\ValidationException;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpKernel\Event\ExceptionEvent;
use Symfony\Component\HttpKernel\KernelEvents;

class UploadValidationExceptionListener implements EventSubscriberInterface
{
    public static function getSubscribedEvents(): array
    {
        return [
            KernelEvents::EXCEPTION => 'onKernelException',
        ];
    }

    public function onKernelException(ExceptionEvent $event): void
    {
        $exception = $event->getThrowable();
        if (!$exception instanceof ValidationException) {
            return;
        }

        // 构造Uppy可解析的错误格式
        $response = new JsonResponse([
            'error' => true,
            'message' => $exception->getMessage(),
        ], 422); // 用422更贴合校验失败的场景

        $event->setResponse($response);
    }
}

Symfony默认autoconfigure会自动注册这个类，也可以手动在services.yaml里配置。

2. 配置Uppy监听错误事件 #

Uppy Dashboard不会自动解析服务端错误，需要监听upload-error事件来展示提示。

示例JS代码：

import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import Blueimp from '@uppy/blueimp'

const uppy = new Uppy({
    debug: true,
    autoProceed: false
})
.use(Dashboard, {
    target: '#uppy-dashboard',
    inline: true
})
.use(Blueimp, {
    endpoint: '/your-upload-endpoint' // 替换成你的上传接口地址
})

// 监听上传错误，自定义错误提示
uppy.on('upload-error', (file, error) => {
    const errorMsg = error.response?.data?.message || '文件格式不符合要求，请重新选择';
    uppy.setFileState(file.id, {
        error: errorMsg,
        isError: true
    });
});

3. 检查OneUpUploaderBundle配置 #

确保上传器配置没有禁用异常处理，在config/packages/oneup_uploader.yaml里：

oneup_uploader:
    mappings:
        your_uploader_name:
            frontend: blueimp
            storage:
                service: oneup_uploader.storage.filesystem
                filesystem: oneup_uploader.filesystem.your_uploader_name
            # 确认这个配置是false，否则默认异常监听会被禁用
            disable_exception_listener: false

核心要点 #

• 必须返回JSON格式的错误响应+非200状态码，Uppy才会判定为上传失败。
• 不要依赖OneUp的默认异常处理，它的响应格式不符合Uppy的预期。

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