Syfmony:使用拖放区上传文件

我正在用Symfony 4.1开发一个简单的CMS之王。

关于我的问题，我们有 2 个实体：

发布实体：

<?php
namespace AppEntity;
use DoctrineCommonCollectionsArrayCollection;
use DoctrineCommonCollectionsCollection;
use DoctrineORMMapping as ORM;
use SymfonyComponentValidatorConstraints as Assert;
/**
 * @ORMEntity(repositoryClass="AppRepositoryPostRepository")
 */
class Post extends BaseEntity
{
    /**
     * @ORMId()
     * @ORMGeneratedValue()
     * @ORMColumn(type="integer")
     */
    private $id;
    /**
     * @ORMColumn(type="text")
     */
    private $content;
    /**
     * @ORMColumn(type="boolean")
     */
    private $status;
    /**
     * @ORMManyToMany(targetEntity="AppEntityCategory", inversedBy="posts")
     */
    private $categories;
    /**
     * @ORMOneToMany(targetEntity="AppEntityPicture", mappedBy="post", orphanRemoval=true, cascade={"persist"})
     */
    private $pictures;
    /**
     * @AssertAll({@AssertImage(mimeTypes="image/jpeg")})
     *
     */
    private $pictureFiles;
    /**
     * Post constructor.
     */
    public function __construct()
    {
        $this->categories = new ArrayCollection();
        $this->pictures = new ArrayCollection();
    }
    /**
     * @return int|null
     */
    public function getId(): ?int
    {
        return $this->id;
    }
    /**
     * @return null|string
     */
    public function getContent(): ?string
    {
        return $this->content;
    }
    /**
     * @param string $content
     * @return Post
     */
    public function setContent(string $content): self
    {
        $this->content = $content;
        return $this;
    }
    /**
     * @return bool|null
     */
    public function getStatus(): ?bool
    {
        return $this->status;
    }
    /**
     * @param bool $status
     * @return Post
     */
    public function setStatus(bool $status): self
    {
        $this->status = $status;
        return $this;
    }
    /**
     * @return Collection|Category[]
     */
    public function getCategories(): Collection
    {
        return $this->categories;
    }
    /**
     * @param Category $category
     * @return Post
     */
    public function addCategory(Category $category): self
    {
        if (!$this->categories->contains($category)) {
            $this->categories[] = $category;
        }
        return $this;
    }
    /**
     * @param Category $category
     * @return Post
     */
    public function removeCategory(Category $category): self
    {
        if ($this->categories->contains($category)) {
            $this->categories->removeElement($category);
        }
        return $this;
    }
    /**
     * @return Collection|Picture[]
     */
    public function getPictures(): Collection
    {
        return $this->pictures;
    }
    /**
     * @param Picture $picture
     * @return Post
     */
    public function addPicture(Picture $picture): self
    {
        if (!$this->pictures->contains($picture)) {
            $this->pictures[] = $picture;
            $picture->setPost($this);
        }
        return $this;
    }
    /**
     * @param Picture $picture
     * @return Post
     */
    public function removePicture(Picture $picture): self
    {
        if ($this->pictures->contains($picture)) {
            $this->pictures->removeElement($picture);
            if ($picture->getPost() === $this) {
                $picture->setPost(null);
            }
        }
        return $this;
    }
    /**
     * @return mixed
     */
    public function getPictureFiles()
    {
        return $this->pictureFiles;
    }
    /**
     * @param $pictureFiles
     * @return Post
     */
    public function setPictureFiles($pictureFiles): self
    {
        foreach ($pictureFiles as $pictureFile) {
            /** @var Picture $picture */
            $picture = new Picture();
            $picture->setImageFile($pictureFile);
            $this->addPicture($picture);
        }
        $this->pictureFiles = $pictureFiles;
        return $this;
    }
}

图片实体：

<?php
namespace AppEntity;
use DoctrineORMMapping as ORM;
use SymfonyComponentValidatorConstraints as Assert;
use SymfonyComponentHttpFoundationFileFile;
/**
 * @ORMEntity(repositoryClass="AppRepositoryPictureRepository")
 */
class Picture
{
    /**
     * @ORMId()
     * @ORMGeneratedValue()
     * @ORMColumn(type="integer")
     */
    private $id;
    /**
     * @var File|null
     * @AssertImage(mimeTypes="image/jpeg")
     */
    private $imageFile;
    /**
     * @ORMColumn(type="string", length=255)
     */
    private $filename;
    /**
     * @ORMManyToOne(targetEntity="AppEntityPost", inversedBy="pictures")
     * @ORMJoinColumn(nullable=false)
     */
    private $post;
    /**
     * @return int|null
     */
    public function getId(): ?int
    {
        return $this->id;
    }
    /**
     * @return File|null
     */
    public function getImageFile(): ? File
    {
        return $this->imageFile;
    }
    /**
     * @param File|null $imageFile
     * @return Picture
     */
    public function setImageFile(? File $imageFile): self
    {
        $this->imageFile = $imageFile;
        return $this;
    }
    /**
     * @return string|null
     */
    public function getFilename(): ?string
    {
        return $this->filename;
    }
    /**
     * @param string $filename
     * @return Picture
     */
    public function setFilename(string $filename): self
    {
        $this->filename = $filename;
        return $this;
    }
    /**
     * @return Post|null
     */
    public function getPost(): ?Post
    {
        return $this->post;
    }
    /**
     * @param Post|null $post
     * @return Picture
     */
    public function setPost(?Post $post): self
    {
        $this->post = $post;
        return $this;
    }
}

所以要添加帖子，我有一个帖子类型：

<?php
namespace AppForm;
use AppEntityCategory;
use AppEntityPost;
use FOSCKEditorBundleFormTypeCKEditorType;
use SymfonyBridgeDoctrineFormTypeEntityType;
use SymfonyComponentFormAbstractType;
use SymfonyComponentFormExtensionCoreTypeFileType;
use SymfonyComponentFormFormBuilderInterface;
use SymfonyComponentOptionsResolverOptionsResolver;
/**
 * Class PostType
 * @package AppForm
 */
class PostType extends AbstractType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('name')
            ->add('content', CKEditorType::class)
            ->add('categories', EntityType::class,
                [
                    'class'        => Category::class,
                    'required'     => true,
                    'choice_label' => 'name',
                    'multiple'     => true,
                ]
            )
            ->add('pictureFiles', FileType::class,
                [
                    'required' => false,
                    'multiple' => true,
                    'label'    => 'Add files...',
                    'attr' =>
                        [
                            'action' => '%kernel.project_dir%/public/media/posts'
                        ]
                ]
            )
            ->add('status')
        ;
    }
    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Post::class,
        ]);
    }
}

与该窗体对应的视图：

{% form_theme form '/admin/form/switch_btn_layout.html.twig' %}
{{ form_start(form) }}
    {{ form_errors(form) }}
    <div class="form-row">
        <div class="col-md-6">
            {{ form_row(form.name) }}
            {{ form_row(form.categories) }}
            {{ form_row(form.status) }}
        </div>
        <div class="col-md-6 dropzone" id="postDropzone">
            {{ form_row(form.pictureFiles, {'attr': {'class': 'dropzone'}} ) }}
            <div class="dropzone-previews" style="border: 1px solid red"></div>
        </div>
    </div>
    <div class="form-group">
        {{ form_row(form.content) }}
    </div>
    <div class="form-group">
        {{ form_row(form.status) }}
    </div>
    {{ form_rest(form) }}
    <button class="btn btn-success btn-lg btn-block" id="postSubmit">
        {{ button_label|default('Save') }}
    </button>
{{ form_end(form) }}

如您所见，文件的"输入"作为 dropzone css 类。事实上，我的项目包括oneup_uploader捆绑包，用于 dropzone。

这里是oneup_uploader的配置：

oneup_uploader:
    mappings:
        # This is a mapping example, remove it and create your own mappings.
        post_image:
            frontend: dropzone
            namer: oneup_uploader.namer.uniqid
            storage:
                directory: '%kernel.project_dir%/public/media/posts'

还有我的Dropzone脚本：

Dropzone.autoDiscover = false;
var postDropzone = new Dropzone('.dropzone', {
    url: '%kernel.project_dir%/public/media/posts',
    // url: 'file/post',
    maxFiles: 10,
    addRemoveLinks: true,
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
});
postDropzone.on("addedfile", function (file) {
    file.previewElement.addEventListener("click", function () {
        postDropzone.removeFile(file);
    })
});

对我来说的问题是：

文件夹中未保存任何文件
Post实体保存在我的数据库中，但不会为图片保存任何内容。

我也尝试不使用OneUploaderBundle，并使用VichUploader：DB中的保存部分是完美的，但我无法将其链接到dropzone。

有些人帮助伙计？多谢！

可能对

新访问者有用。您可以使用扩展Symfony Form并添加新类型DropzneType的库。

1.安装库

composer require emrdev/symfony-dropzone

这样，您将拥有一个新的表单类型DropzoneType

2.像这样使用表单中的类型

public function buildForm(SymfonyComponentFormFormBuilderInterface $builder, array $options)
{ 
    // userFiles is OneToMany
    $builder->add('userFiles', DropzoneType::class, [
        'class' => File::class,
        'maxFiles' => 6,
        'uploadHandler'=>'uploadHandler',  // route name
        'removeHandler'=> 'removeHandler'// route name
   ]);
}

将上传处理程序和删除处理程序选项更改为终结点

3.路由上传处理程序/删除处理程序可能如下所示

/**
 * @Route("/uploadhandler", name="uploadHandler")
 */
public function uploadhandler(Request $request, ImageUploader $uploader) { 
    $doc = $uploader->upload($request->files->get('file'));  
    $file = new File(); 
    $file->setSrc($doc['src']);
    ...
    $this->getDoctrine()->getManager()->persist($file);
    $this->getDoctrine()->getManager()->flush();
    return new JsonResponse($file);
}

/**
 * @Route("/removeHandler/{id}", name="removeHandler")
 */
public function removeHandler(Request $request,File $file = null) {
    $this->getDoctrine()->getManager()->remove($file);
    $this->getDoctrine()->getManager()->flush();
    return new JsonResponse(true);
}

请注意，上传处理程序应返回一个文件对象

你应该传递upload url而不是upload directory

在树枝中生成网址 - {{ oneup_uploader_endpoint('post_image') }}

var postDropzone = new Dropzone('.dropzone', {
    url: '{{ oneup_uploader_endpoint('post_image') }}',
    // url: '%kernel.project_dir%/public/media/posts',
    // url: 'file/post',
    maxFiles: 10,
    addRemoveLinks: true,
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
});

相关内容

最新更新

热门标签：