symfony 4.3和Dropzone重命名并显示/删除现有文件

Question

我正在尝试为我的应用程序实现图像上传。 我的问题： -我尝试了所有可以在网上找到的内容，但是在上传之前无法重命名该文件。服务器上的文件名始终是一个哈希值。 -我认为创建缩略图不起作用，因为我必须添加一个CSS才能使图像的宽度为120px。 -删除一个文件时不会将其删除。

任何人都可以解释一下如何实现吗？

这里是我的来源：

模板：
edit.html.twig

{% extends 'layout.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('includes/dropzone/min/basic.min.css') }}"/>
{% endblock %}

{% block tron %}
<h2>{{component}} edit - {{ entity.monitorId|default(entity.id) }}</h2>
{% endblock %}

{% block body %}

<div class="row">
    <div class="col-sm-8">
        {{ form_start(form, {'attr': {'id': 'infomonitore_form' } }) }}

        {{ form_errors(form) }}

        {{ form_row(form.detail) }}
        {{ form_row(form.notizen) }}
        <div class="form-group row">
            <label class="col-form-label col-sm-2">
                Files to add:
            </label>
            <div class="col-sm-10">
                <div action="{{ oneup_uploader_endpoint('gallery', {id: entity.id}) }}" class="dropzone js-reference-dropzone" style="min-height: 100px">
                </div>
            </div>
        </div>

        <button type="submit" id="buttonSubmit" class="btn btn-primary">Update</button>
        <a href="{{ path('infomonitore_show_ID', {'id': entity.id }) }}" class="btn btn-dark">Show</a>

        {{ form_end(form) }}

    </div>
    <div class="col-sm-4">
    </div>
</div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('includes/dropzone/dropzone.js') }}"></script>
    <script>

        Dropzone.autoDiscover = false;

        $(document).ready(function () {

            var dropzone = new Dropzone('.js-reference-dropzone', {
                autoProcessQueue: false,
                dictMaxFilesExceeded: 'Only 5 Image can be uploaded',
                acceptedFiles: 'image/*',
                maxFilesize: 10,  // in Mb
                addRemoveLinks: true,
                maxFiles: 5,
                resizeWidth: 1920,
                paramName: 'file',
                renameFile: function (file) {
                    let newName = $('#InfomonitoreFormType_monitorId').val() + '-' + new Date().getTime() + '.' + file.name.split('.').pop();
                    file.name = newName;
                    return file.renameFilename = newName;
                },
                params: {
                    infomonitor: $('#InfomonitoreFormType_monitorId').val()
                },
                init: function () {
                    console.log(this.files);
                    {% for image in entity.images %}
                        var mockFile = {name: "{{ image.imageFile }}", size: 12345, dataURL: "{{ asset('locations/')~image.imageFile }}",accepted: true};
                        this.files.push(mockFile);
                        this.emit("addedfile", mockFile);
                        //this.createThumbnailFromUrl(mockFile, mockFile.dataURL);
                        this.emit("thumbnail", mockFile, mockFile.dataURL)
                        this.emit("complete", mockFile);
                    {% endfor %}
                    this.on("success", function (file, response) {
                        console.log("Success wurde aufgerufen");
                        //e.preventDefault();
                        $('#infomonitore_form').submit();
                    });
                    this.on("error", function (tmp) {
                        console.log('error');
                        console.log(tmp);
                    });
                }
            });

        $('#buttonSubmit').click(function(e){
            if(dropzone.getQueuedFiles().length > 0) {
                e.preventDefault();
                dropzone.processQueue();
            }
        });

    });
</script>
{% endblock %}

，这里是我的uploadListener（使用了oneupUploader）：

class UploadListener
{
     /* @var EntityManager $manager*/
    private $manager;

    /* @var InfomonitoreRepository $infomonitor */
    private $infomonitor;

    /**
     * UploadListener constructor.
     * @param EntityManager $manager
     * @param InfomonitoreRepository $infomonitor
     */
    public function __construct(EntityManager $manager, InfomonitoreRepository $infomonitor)
    {
        $this->manager = $manager;
        $this->infomonitor = $infomonitor;
    }


    public function onUpload(PostPersistEvent $event)
    {
        $request = $event->getRequest();
        /* @var Infomonitore $monitorId */
        $monitorId = $this->infomonitor->find($request->get('infomonitor'));
        /* @var File $file */
        $file = $event->getFile();

        $fileName = $monitorId->getMonitorId().'-'.time().'.'.$file->guessExtension();

        $image = new Image();
        $image->setImageFile(basename($file));
        $image->setImageName($fileName);
        $image->setInfomonitor($monitorId);
        try {
            $this->manager->persist($image);
            $this->manager->flush();
        } catch (ORMException $e) {
            print_r($e);
        }

        // if everything went fine
        $response = $event->getResponse();
        $response['success'] = true;
        return $response;
    }
}

谢谢。