VichUploader捆绑和表单到多图像上传

Question

我在Symfony 4中使用VichUploaderBundle，我有一个关于使用表单发送一堆照片的问题。为此，我必须使用CollectionType和一对多关系(一个产品有几张照片(。下面我提供了代码，它只向我显示表单的空白框架，并且它缺少用于添加照片的按钮，因为它们在此上传器中。我不明白为什么会发生这种情况。

产品实体(一对多(：

/**
* @var ProductMultiImage[]
* One Product has Many Images.
* @ORMOneToMany(targetEntity="AppEntityImageProductMultiImage", mappedBy="product", cascade={"persist"})
* @ORMJoinColumn(nullable=true)
*/
private $productMultiImages = null;

图像实体(多对一(：

/**
* Many Images have One Product.
* @ORMManyToOne(targetEntity="AppEntityAdminProduct", inversedBy="productMultiImages", cascade={"persist"})
* @ORMJoinColumn(name="product_id", referencedColumnName="id", nullable=true)
*/
private $product = null;

添加照片的表格：

class ProductImageType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('productMultiImages', CollectionType::class, array(
'data_class'    => ImageType::class,
'allow_add'     => true,
'allow_delete'  => true,
'by_reference'  => false,
))
;
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'data_class' => null,
]);
}
}

图像类型：

public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('imageFile', VichImageType::class)
;
}

我在哪里可以找到任何解决方案？

Answer 1

如果$productMultiImages为空，则表单将没有任何要填充的内容。将其设置为空数组集合，并向其添加至少一个空的 Image 实体。

在产品实体的 __constuct(( 中

$this->productMultiImages = new ArrayCollection();
$this->productMultiImages->add(new Image();

或者将它们添加到实例化的产品中，然后再将其传递到表单构建器中。

上次我使用它时，VichUploader 不支持使用单个表单文件元素的多文件上传。 您需要在客户端上使用 javascript 为要上传的每个图像向表单添加额外的文件上传元素。有关此内容的更多信息，请参阅 https://symfony.com/doc/current/form/form_collections.html。

Answer 2

您可能忘记将必要的 JQuery 代码添加到树枝中，这是使集合工作所必需的。 另外，对于按钮，您必须使用正确的类自己创建一个。它不会自己神奇地来;)

<button type="button" class="add-another-collection-widget" data-list="#your-fields-list">Add another email</button>

JQuery 代码可以在以下位置找到：

http://symfony.com/doc/current/reference/forms/types/collection.html

该 JQuery 代码确保每次单击按钮时，JQuery 都会将元素从 data 属性中复制出来(当您使用 dev-tools "检查"原始元素时可以看到该属性(，并向其添加一个数字，从 0 开始表示第一个集合项。