使用VichUploader和Ajax / axios上传文件

时间:2019-12-11 21:44:28

标签: php symfony symfony4 vichuploaderbundle gaufrette

我正在尝试设置一个表单,以使用VichUploader和axios / ajax上传文件。

我要发送的表单在控制台上看起来像这样: the form on chrome debugger

我已经正确设置了vich上传器和GNP,因为该表单可以在非ajax表单中使用。

我有一个简单的文件要上传,并带有如下所示的实体集:

<?php

namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\HttpFoundation\File\File;
use Symfony\Component\HttpFoundation\File\UploadedFile;
use Vich\UploaderBundle\Mapping\Annotation as Vich;

/**
 * Class Logo
 *
 * @ORM\Table(name="logos")
 * @ORM\Entity()
 * @Vich\Uploadable()
 */
class Logo
{
    /**
     * @var int
     *
     * @ORM\Column(type="integer", name="id")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    private $id;

    /**
     * @var string
     *
     * @ORM\Column(type="string", length=255, nullable=true)
     */
    private $logoName;

    /**
     * NOTE: This is not a mapped field of entity metadata, just a simple property.
     *
     * @var File
     *
     * @Vich\UploadableField(mapping="logo", fileNameProperty="logoName", size="logoSize")
     */
    private $logoFile;

    /**
     * @ORM\Column(type="integer", nullable=true)
     *
     * @var integer
     */
    private $logoSize;

    /**
     * @ORM\Column(type="datetime", nullable=true)
     */
    private $updatedAt;

getter和setter就像on the documentation

我的FormType也很基本:

<?php

// src/Form/UserType.php
namespace App\Form;

use App\Entity\Logo;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

use Symfony\Component\OptionsResolver\OptionsResolver;
use Vich\UploaderBundle\Form\Type\VichFileType;

class LogoType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        // Remember username is email
        $builder
            ->add('logoFile', VichFileType::class, [
                'label'         => false,
                'required'      => false,
                'allow_delete'  => false,
                'download_uri'  => true,
                'download_label' => true,
                'download_link' => true,
            ])
        ;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => Logo::class,
            'csrf_protection' => false,
        ));
    }
}

我的控制器也是如此:

    /**
     * Update a Logo for the Startup
     *
     * @Rest\Post("/logo")
     *
     * @param Request $request
     * @param UserRepository $userRepository
     *
     * @return Response
     */
    public function updateLogo(Request $request, UserRepository $userRepository): Response
    {
        $success = false;

        // Retrieve the user
        $user = $this->getUser();

//        var_dump($image);
        $startup = $user->getStartup();


        $logo = new Logo();
        $form = $this->createForm(LogoType::class, $logo);

        // Handle Submit (will only happen on POST)
        $form->submit($request->request->get('upload'));
        if ($form->isSubmitted() && $form->isValid()) {

            //Initialize EntityManager to update the user
            $entityManager = $this->getDoctrine()->getManager();

            $logo = $form->getData();
            $startup->setLogo($logo);

            try {
                $entityManager->persist($startup);
                $entityManager->flush();
            } catch (ORMException $e) {
                throw new HttpException(500, "Couldn't update your profile. Try again.");
            }

            $success = true;
        }

        $view = $this->view($success, 200);

        return $this->handleView($view);
    }

执行此操作时,它确实会创建一个新的对象Logo,但所有字段均为NULL,并且没有文件上传到AWS S3。请注意,如果我传递的是logoFile而不是upload [logoFile],则该表单不会生效。我想传递上载[logoFile]是正确的事情。

不确定引擎盖下发生了什么。我想念什么?

非常感谢您。

编辑: 这是我的Ajax提交代码-在React上由Axios处理:

const formData = new FormData();
    formData.append('upload[logoFile]', e.files[0]);

    axios.post('/startups/logo', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })

EDIT2: 进行dd($ request-> files)给我以下内容:

StartupsController.php on line 152:
FileBag^ {#73
  #parameters: array:1 [
    "upload" => array:1 [
      "logoFile" => UploadedFile^ {#63
        -test: false
        -originalName: "49138054_2423211744374313_3487352288589119488_n.jpg"
        -mimeType: "image/jpeg"
        -error: 0
        path: "/private/var/folders/wl/n382y8xs021dnbz3jhbklsnm0000gn/T"
        filename: "phpWomX0H"
        basename: "phpWomX0H"
        pathname: "/private/var/folders/wl/n382y8xs021dnbz3jhbklsnm0000gn/T/phpWomX0H"
        extension: ""
        realPath: "/private/var/folders/wl/n382y8xs021dnbz3jhbklsnm0000gn/T/phpWomX0H"
        aTime: 2019-12-11 22:02:51
        mTime: 2019-12-11 22:02:51
        cTime: 2019-12-11 22:02:51
        inode: 8664431786
        size: 106292
        perms: 0100600
        owner: 501
        group: 20
        type: "file"
        writable: true
        readable: true
        executable: false
        file: true
        dir: false
        link: false
      }
    ]
  ]
}

0 个答案:

没有答案