Symfony 4：具有预览和附加/删除功能的多图像上传

Question

简介

我正在开发一个Symfony 4应用程序，该应用程序允许其用户创建和编辑与单个或多个图像相关的帖子。数据通过Doctrine存储到数据库。每个帖子都有关联的PostImage实体，其中包含实际图像文件的文件名。

发布实体：

/**
 * @ORM\Entity
 */
class Post
{
    ...

    /**
     * @ORM\OneToMany(targetEntity="PostImage", mappedBy="post", cascade={"persist", "remove"}, orphanRemoval=true)
     */
    private $images;

   ...

PostImage实体：

/**
 * @ORM\Entity
 */
class PostImage
{

    ...
    /**
    * @ORM\ManyToOne(targetEntity="Post")
    */
    private $post;

    /**
     * @ORM\Column(type="string", length=512)
     */
    private $filename;

    ...

我要做什么

将基本文件上传到db的良好描述是http://my.url/bla/girl.jpg。但是我想使图像上传和预览更加动态。

用户应该能够：

• 上传单张/多张图像并预览
• 上传更多图片
• 删除一些图片
• 如果全部都无法提交表格 图片已删除
• 在以下位置编辑帖子（即执行上述步骤） 以后使用相同的表格

我在哪里挣扎

上面的JavaScript / DOM操作方面对我来说很清楚。我在奋斗的地方是如何在事物的Symfony方面构建形式或修改类型。 Post实体的“ $ images”字段是一个集合，并且here描述了Symfony将表单与集合一起使用的方式。但是我很努力地了解如何修改此逻辑以处理文件。

如果我使用未映射的FileType控件并通过AJAX更改后上传文件，如何存储和提交代表当前图像列表的链接（有些可能是新的，有些-旧的，有些-删除了）？将CollectionType控件与HiddenType子项一起使用，这些子项包含对在服务器上上传的文件的引用？

class PostType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('images', CollectionType::class, array(
                'allow_add' => true,
                'allow_remove' => true,
                'by_reference' => false,
                'entry_type' => HiddenType::class
                ))
            ->add('add_images', FileType::class, array(
                'label' => 'Add images',
                'mapped' => false,
                'multiple' => true
                ))
            ->add( //other fields..
            ...
     }
}