Question

我有一个带有输入图像的表单，我想在提交表单之前旋转并缩小它们。此时，我知道如何旋转和缩小它们，但是我无法设法将它们注入表格中，因此它们通过相同的POST请求发送，就好像它们没有变化一样。

我有一个Symfony 4应用，该应用具有可以上传产品的表单。此表单包含带有预览框的一组图像。表单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变量为null）

Answer 1

最后，我设法通过在表单上插入HiddenType组件，然后通过JavaScript在其中引入了base64结果图像来实现这一点。

如何压缩HTML表单图像，替换它并通过相同的表单提交（jQuery，Symfony）发送它

1 个答案: