javascript - 如何使用 AJAX 将图像发送到 Symfony Controller ？

Question

我已经使用 Symfony 3 通过 AJAX 将裁剪后的图像发送到 Symfony Controller ，但是我无法使用 Symfony 4 webpack 实现相同的效果。我之前使用 on('change') 方法实现了它，但是，连同 on('click) 和 on('submit') 似乎不起作用。

我的代码如下:

JavaScript 应用程序.js

 Routing.setRoutingData(Routes)
 var routeUrl = Routing.generate('getImage');
 .....................

 $('#upload_btn').on('click', function(){

            var block = getResponse.split(";");
            // Get the content type
            var contentType = block[0].split(":")[1];// In this case "image/gif"
            // get the real base64 content of the file
            var realData = block[1].split(",")[1];// In this case "iVBORw0KGg...."

            // Convert to blob
            var blob = b64toBlob(realData, contentType);

                    let formData = new FormData(form);
                    formData.append('image_path', blob);
                    $.ajax({
                    url: routeUrl,
                    method: 'POST',
                    data:  formdata,
                    contentType: false,
                    cache: false,
                    processData:false,
                    headers: {'X-Requested-With':'XMLHttpRequest'},
                    success:  function(data){

                                  $("#previewImg").attr('src', getResponse);
                }
          });
    });

Symfony Controller

    /**
* @Route("/getImage", name="getImage", methods={"POST"}, options={"expose"=true})
 * @param Request $request
 * @return JsonResponse
 * @Cache(vary={"X-Requested-With"})
*/

public function gteImageAjax(Request $request){


    if($request->isXmlHttpRequest()){

        $event = new Members();

        $form = $this->createForm(EventType::class, $event);
        $form->handleRequest($request);
        /** @var Symfony\Component\HttpFoundation\File\UploadedFile $file */
       // $file = $request->get('image');
        $file = $request->files->get('image_path');

       // $file = new UploadedFile($file['tmp_name'], $file['name'], $file['type']);

        $filename = md5(uniqid()).'.'.$file->guessExtension();

        $file->move($this->getParameter('image_directory'), $filename);

        $event->setImage($filename);  
        $em = $this->getDoctrine()->getManager(); 
        $em->persist($event);

        $em->flush();

        return $this->redirectToRoute('createEvent');
    }

    return new JsonResponse("This is not Ajax");
 }

澄清一下，我想使用 AJAX 将裁剪后的图像发送到我的 symfony Controller 。任何帮助将不胜感激。

Answer 1

将您的表单提供给 FormData，指定或不指定数据

// whole form    
let formData: new FormData($(form)[0]);

//specifying
var formData = new FormData();
formData.append('category', 'general');

// file
var blob = $('input[type=file]')[0].files[0]);
formData.append('image_path', blob);

//send the request via AJax
$.ajax({
    url: routeUrl,
    data: formData,
    type: 'POST',
    contentType: false, // requires jQuery 1.6+
    processData: false, // required
    cache: false,
    success:  function(data){

    $("#previewImg").attr('src', getResponse);
    }
});

你做得很好，只需检查你的 ajax 请求中的 var formData，你正在声明 formData 并发送 formdata

改变这个

data:  formdata,

为此

data: formData,