javascript - Symfony2 上传 javascript blob

Question

我正在尝试使用 blob 将使用 canvas 创建的图像上传到 symfony。javascript 代码正在运行并且正在发送一个 blob。但是在 Controller 中我无法通过验证。当我尝试读取验证时，它不包含任何错误。

我的 Foto.php 有问题吗？或者它在我的 Controller 中？

发送 POST 的 Javascript:

var dataURL = canvas.toDataURL("image/png", 0.5);
var blob = dataURItoBlob(dataURL);        
var formData = new FormData();
formData.append('file', blob);

var xhr = new XMLHttpRequest();
// Add any event handlers here...
xhr.open('POST', '{{ path("foto_uploadwebcam" ) }}', true);
xhr.send(formData);


function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

Foto.php(部分)

/**
* Foto
*
* @ORM\Table()
* @ORM\Entity(repositoryClass="Yeouuu\FotoBundle\Entity\FotoRepository")
* @ORM\HasLifecycleCallbacks
*/
class Foto
  {    
/**
 * @var integer
 *
 * @ORM\Column(name="id", type="integer")
 * @ORM\Id
 * @ORM\GeneratedValue(strategy="AUTO")
 */
private $id;

/**
 * @Assert\File(maxSize="6000000")
 */
private $file;
private $temp;

/**
 * Sets file.
 *
 * @param UploadedFile $file
 */
public function setFile(UploadedFile $file = null)
{
    $this->file = $file;
    // check if we have an old image path
    if (isset($this->path)) {
        // store the old name to delete after the update
        $this->temp = $this->path;
        $this->path = null;
    } else {
        $this->path = 'initial';
    }
}

/**
 * @ORM\PrePersist()
 * @ORM\PreUpdate()
 */
public function preUpload()
{
    if (null !== $this->getFile()) {
        // do whatever you want to generate a unique name
        $filename = sha1(uniqid(mt_rand(), true));
        $this->path = $filename.'.'.$this->getFile()->guessExtension();
    }
}

/**
 * @ORM\PostPersist()
 * @ORM\PostUpdate()
 */
public function upload()
{
    if (null === $this->getFile()) {
        return;
    }

    // if there is an error when moving the file, an exception will
    // be automatically thrown by move(). This will properly prevent
    // the entity from being persisted to the database on error
    $this->getFile()->move($this->getUploadRootDir(), $this->path);

    //$this->fixOrientation($this->getAbsolutePath());
    //create polaroid
    $this->effectPolaroid($this->getAbsolutePath(), 3);

    // check if we have an old image
    if (isset($this->temp)) {
        // delete the old image
        unlink($this->getUploadRootDir().'/'.$this->temp);
        // clear the temp image path
        $this->temp = null;
    }
    $this->file = null;
}
}

和 Controller :

public function uploadwebcamAction(Request $request)
{        

    $foto = new Foto();
    $form = $this->createFormBuilder($foto, array('csrf_protection' => false))
        ->add('file', 'file')
        ->getForm();

    $form->handleRequest($request);

    if ($form->isValid()) {
        $em = $this->getDoctrine()->getManager();
        $em->persist($foto);
        $em->flush();        
        return $this->redirect($this->generateUrl("foto_share", array('foto' => $foto->getId())));
    }
}

Answer 1

您必须在请求中添加以下 header :

enctype: multipart/form-data

否则 symfony 无法识别“部分”并且 Request->files 为空。

https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-enctype