Symfony 3.1 和 OneUploaderBundle + Blueimp = UploadListener 未被调用

Posted

技术标签:

【中文标题】Symfony 3.1 和 OneUploaderBundle + Blueimp = UploadListener 未被调用【英文标题】:Symfony 3.1 and OneUpUploaderBundle + Blueimp = UploadListener is not called 【发布时间】:2016-11-12 17:52:31 【问题描述】:

简介

大约两周前,我使用OneupUploaderBundle 创建了关于上传的类似问题,但使用FineUploader 库。遗憾的是,目前还没有答案。 同时我尝试设置不同的上传库。

我正在使用XAMPP [1] 在Windows 10 Pro 上进行开发,其中包括php v7.0.8

[1]XAMPP for Windows

我正在使用 Symfony v3.1.5、OneupUploaderBundle 和 Blueimp jQuery upload 将文件上传到服务器。

在进行设置时,我遵循了 OneUpUploaderBundle [2] 和 jQuery file upload [3]、[4] 的文档。

[2]OneupUploaderBundle documentation [3]OneupUploaderBundle Blueimp example [4]Blueimp jQuery file upload documentation

问题

我想将文件上传到某个目录,然后检查他们的 mime type 并验证是否允许上传的文件 mime 类型,然后 - 将它们移动到自定义目录(可以从文件更改为文件),最后我想将文件路径和文件名持久化到数据库。

文件上传工作正常,文件上传到oneup_uploader_endpoint('gallery')。甚至自定义文件Namer 也可以工作并允许上传到自定义目录。

但是,不调用监听器(上传监听器和验证)并显示在 Symfony Profiler 事件部分 Not Called Listeners!

这很不幸,因为我想使用Post_Persist 事件将有关文件的信息保存到数据库。 OneupUploaderBundle events.

代码

我的服务.yml

services:
    app.upload_listener:
        class: AppBundle\EventListener\UploadListener
        arguments: ["@doctrine.orm.entity_manager"]
        tags:
            -  name: kernel.event_listener, event: oneup_uploader.post_persist.default_uploader, method: onUpload 
            -  name: kernel.event_listener, event: oneup_uploader.post_persist.default_uploader, method: onPostUpload 

    app.upload_unique_namer:
        class: AppBundle\Uploader\Naming\UploadUniqueNamer
        arguments: ["@session"]

我的自定义命名器

<?php

namespace AppBundle\Uploader\Naming;

use Oneup\UploaderBundle\Uploader\File\FileInterface;
use Oneup\UploaderBundle\Uploader\Naming\NamerInterface;
use Symfony\Component\HttpFoundation\Session\Session;

class UploadUniqueNamer implements NamerInterface

    private $session;

    public function __construct(Session $session)
    
        $this->session = $session;
    

    /**
     * Creates a user directory name for the file being uploaded.
     *
     * @param FileInterface $file
     * @return string The directory name.
     */
    public function name(FileInterface $file)
    
        $upload_files_path = $this->session->get('upload_files_path');
        $unique_name = uniqid();

        return sprintf('%s/%s_%s',
            $upload_files_path,
            $unique_name,
            $file->getClientOriginalName()
        );
    

我的 config.yml

oneup_uploader:
    mappings:
        gallery:
            frontend: blueimp
            enable_progress: true
            namer: app.upload_unique_namer
            use_orphanage: false
            allowed_mimetypes: [image/png, image/jpg, image/jpeg, image/gif]
            max_size: 200M

我的上传监听器:

<?php

namespace AppBundle\EventListener;

use Oneup\UploaderBundle\Event\PreUploadEvent;
use Oneup\UploaderBundle\Event\PostUploadEvent;
use Oneup\UploaderBundle\Event\PostPersistEvent;
use Doctrine\ORM\EntityManager;
use AppBundle\Entity\Product;

class UploadListener

    /**
     * @var EntityManager
     */
    private $entityManager;

    //protected $originalName;

    public function __construct(EntityManager $entityManager)
    
        $this->entityManager = $entityManager;
    

    public function onUpload(PostPersistEvent $event)
    
        $file = $event->getFile();
        $this->originalName = $file->getClientOriginalName();
    

    public function onPostUpload(PostPersistEvent $event)
    
        $file = $event->getFile();

        $object = new Product();
        $object->setName($file->getClientOriginalName());
        //$object->setName($file->getPathName());

        $this->entityManager->persist($object);
        $this->entityManager->flush();
    

上传.html.twig

% extends 'base.html.twig' %

% block stylesheets %
     parent() 
    <link rel="stylesheet" type="text/css" href=" asset('css/blueimp/jquery.fileupload.css') " />
    <link rel="stylesheet" type="text/css" href=" asset('css/bootstrap/bootstrap.css') " />
    <link rel="stylesheet" type="text/css" href=" asset('css/bootstrap/bootstrap-theme.css') " />
% endblock %

% block content %
    <div id="box-list" class="clearfix">
        Go to: <a href=" path('product_list') ">Product list</a>
    </div>
    <div id="box-upload">
        <div id="box-file-upload">
            <form method="post" enctype="multipart/form-data">
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>&nbsp;Choose files...</span>
                    <input id="file-upload" type="file" name="files[]" data-url=" oneup_uploader_endpoint('gallery') " />
                </span>
            </form>
        </div>
        <div id="box-progress">
            <div id="box-progress-bar" style="width: 0%;"></div>
        </div>
        <div id="box-info">
            <p>Upload status...</p>
        </div>
    </div>
% endblock %

% block javascripts %
     parent() 
    <script type="text/javascript" src=" asset('js/jquery-3.1.0.js') "></script>
    <script type="text/javascript" src=" asset('js/blueimp/jquery.ui.widget.js') "></script>
    <script type="text/javascript" src=" asset('js/blueimp/jquery.iframe-transport.js') "></script>
    <script type="text/javascript" src=" asset('js/blueimp/jquery.fileupload.js') "></script>
    <script type="text/javascript">
        $(function()
        
            'use strict';
            $('#file-upload').on('click', function ()
            
                $('#box-progress-bar').css('width', '1%');
            );

            $('#file-upload').on("fileuploadprocessfail", function(e, data)
            
                var file = data.files[data.index];
                alert(file.error);
                console.log(file.error);
            );

            $('#file-upload').fileupload(
                dataType: 'json',
                add: function (e, data)
                
                    var fileName = data.files[0].name;
                    var fileType = data.files[0].name.split('.').pop();
                    var allowedTypes = 'jpg,JPG,jpeg,JPEG,png,PNG,gif,GIF';
                    if (allowedTypes.indexOf(fileType) < 0)
                    
                        $('#box-progress-bar').css('width', '0');
                        $('<p/>').text(fileName).appendTo($('#box-info'));
                        $('<p class="wrong-file-type"/>').text('Invalid file type').appendTo($('#box-info'));
                        return false;
                    
                    else
                    
                        $('<p/>').text(fileName).appendTo($('#box-info'));
                        if ($('.button-upload').length == 0)
                        
                            // disabling file input
                            $('input#file-upload').attr('disabled', true);

                            data.context = $('<button class="button-upload btn btn-primary start"/>').text('Upload')
                                    .appendTo($('#box-info'))
                                    .click(function ()
                                    
                                        data.context = $('<p class="upload-success"/>').text('Uploading...').replaceAll($(this));
                                        ($('.button-cancel')).remove();
                                        data.submit();
                                    );
                            $('<button class="button-cancel btn btn-warning cancel" />').text('Cancel')
                                    .appendTo($('#box-info'))
                                    .click(function ()
                                    
                                        $('#box-progress-bar').css('width', '0');
                                        //console.log('testing');
                                        var message = 'Upload canceled';
                                        ($('.button-upload')).remove();
                                        ($('.button-cancel')).remove();
                                        $('<p class="wrong-file-type"/>').text(message).appendTo($('#box-info'));
                                        // enabling file input
                                        $('input#file-upload').attr('disabled', false);
                                    );
                        
                    
                ,
                progressall: function (e, data)
                
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#box-progress-bar').css('width', progress + '%');
                ,
                done: function (e, data)
                
                    data.context.text('Upload finished.');
                    // enabling file input
                    $('input#file-upload').attr('disabled', false);
                
            );
        );
    </script>
% endblock %

更新

    添加了关于开发环境的注释。 尝试了与 Symfony v2.8.8 相同的代码,遗憾的是没有调用 UploadListener。 已编辑 services.yml,删除(我认为)现在不必要的(重复 - 在 OneUploaderBundle 中提供)验证是我在尝试使其工作时添加的...

结论

请指教。

感谢您的时间和知识。

【问题讨论】:

【参考方案1】:

只听正确的事件。 事件交换包含您的映射名称,以便您可以对该映射实施特定逻辑,而不会影响其他映射。

事件到这种格式。

oneup_uploader.post_upload.mapping

在你的情况下,它会给

oneup_uploader.post_upload.gallery

更多信息,请阅读 https://github.com/1up-lab/OneupUploaderBundle/blob/master/Resources/doc/events.md

【讨论】:

是的,看来问题是我的服务配置错误。实际上,oneup_uploader.post_persist.gallery 而不是 ...default_uploader 有效。奇怪的是...default_uploader 只是 PHPStorm 提供的自动完成项目。与此同时,事件仍显示在 Event Dispather Not Called Listeners 部分,尽管我可以确认事件现在触发并且我可以将有关文件的信息保存到数据库。再次感谢。

以上是关于Symfony 3.1 和 OneUploaderBundle + Blueimp = UploadListener 未被调用的主要内容,如果未能解决你的问题,请参考以下文章

Symfony 3.1 作曲家冲突

如何解决这个问题,我使用 Symfony 3.1 [关闭]

Symfony 3.1:找不到路径“/logout”的控制器

symfony 3.1路由{占位符}默认值

EasyAdmin 3.1 CrudControllers Symfony

在 Symfony 3.1 中升级时,需要对 FOSUser 进行完全身份验证