Как сжать изображение HTML-формы, заменить его и отправить через ту же форму отправки (jQuery, Symfony) - PullRequest
0 голосов
/ 04 февраля 2019

У меня есть форма с входными изображениями, и я хотел бы повернуть и уменьшить их перед отправкой формы.На данный момент я знаю, как повернуть и уменьшить их, но мне не удается внедрить их в форму, чтобы они отправлялись через тот же POST-запрос, как если бы они не изменились.

У меня есть Symfony4 приложение, которое имеет форму для загрузки продуктов.Эта форма содержит набор изображений с окном предварительного просмотра.Форма POST выполняется с помощью вызова отправки формы HTML по умолчанию, поэтому Symfony выполняет почти всю работу.

ProductController.php:

public function upload(Request $request) {

    $product = new Product();

    $form = $this->createForm(ProductType::class, $product);

    $form->handleRequest($request);

    $viewVars = [
        'form' => $form->createView()
    ];

    if ($form->isSubmitted() && $form->isValid() && !empty($form->get('image')->getData())) {

        /** @var UploadedFile $image */
        $image = $form->get('image')->getData();
        if(!empty($image)) {
            $pImage = new ProductImage();
            $pImage->setImage($this->amazonS3Service->uploadUploadedFile($image));
            $pImage->setProduct($product);
            $product->setImage($pImage);
            $product->addImage($pImage);
        }

        $entityManager->persist($product);
        $entityManager->flush();

        return $this->redirectToRoute('product', ['id' => $product->getId()]);

    }

    return $this->render('upload/upload.html.twig', $viewVars);
}

upload.html:

<form action="/upload" class="product-upload" method="post" enctype="multipart/form-data">
    <input type="file" id="product_image" name="product[image]" accept="image/*">
</form>

upload.js:

readAndCompressImage(file, config_compression)
    .then(resizedImage => {
                    $('#product_image').remove();
                    $('<input>').attr({
                        type: 'hidden',
                        id: 'product_image',
                        name: 'product[image]',
                        value: resizedImage //This is a blob
                    }).appendTo('form');

Я хотел бы загрузить измененные и повернутые изображения таким образом, чтобы symfony выполнял для меня всю необходимую работу.На данный момент я могу загружать только те изображения, которые я выбрал на входе, а не измененные.Скрытый ввод, который я добавил, неправильно управляется Symfony на стороне сервера (переменная $ image равна нулю)

1 Ответ

0 голосов
/ 04 февраля 2019

В конце концов мне удалось сделать это, вставив компоненты HiddenType в форму, а затем введя в них изображение результата base64 через javascript.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...