簡體   English   中英

不調用Symfony 3.1和OneUpUploaderBundle + Blueimp = UploadListener

[英]Symfony 3.1 and OneUpUploaderBundle + Blueimp = UploadListener is not called

介紹

大約兩周前,我使用OneupUploaderBundle創建了類似的關於上傳的問題,但是使用了FineUploader庫。 可悲的是,還沒有答案。 在此期間,我嘗試設置不同的上傳庫。

我正在使用XAMPP [1]在Windows 10 Pro進行開發,其中包括PHP v7.0.8

我正在使用Symfony v3.1.5, OneupUploaderBundleBlueimp jQuery上傳 ,以便將文件上傳到服務器。

在設置時,我遵循了OneUpUploaderBundle [2]和jQuery file upload [3],[4]的文檔。

問題

我想將文件上傳到某個目錄,然后檢查他們的mime類型並驗證是否允許上傳文件mime類型,之后 - 將它們移動到自定義目錄(可以從文件更改為文件),最后我想保留文件路徑和文件名到數據庫。

文件上傳工作正常,文件上傳到oneup_uploader_endpoint('gallery') 甚至自定義文件Namer也可以工作並允許上傳到自定義目錄。

但是, 不會調用偵聽器 (上傳偵聽器和驗證),並且會在Symfony Profiler事件部分中顯示Not Called Listeners

這是不幸的,因為我想使用Post_Persist事件將有關文件的信息保存到數據庫。 OneupUploaderBundle事件

我的services.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();
    }
}

upload.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 %}

更新

  1. 添加了有關開發環境的說明。
  2. 用Symfony v2.8.8嘗試了相同的代碼,遺憾的是沒有調用UploadListener。
  3. 編輯的services.yml ,刪除(我認為)現在不必要(重復 - 在OneupUploaderBundle中提供)驗證,我在嘗試使其工作時添加...

結論

請指教。

感謝您的時間和知識。

只聽正確的事件。 事件交換包含映射的名稱,以便您可以為此實現一個不會影響其他邏輯的特定邏輯。

這種格式的事件。

oneup_uploader.post_upload.{mapping}

在你的情況下,它會給

oneup_uploader.post_upload.gallery

有關更多信息,請閱讀https://github.com/1up-lab/OneupUploaderBundle/blob/master/Resources/doc/events.md

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM