Symfony2上传javascript blob

前端之家收集整理的这篇文章主要介绍了Symfony2上传javascript blob前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用blob将使用canvas创建的图像上传到symfony.
javascript代码正在运行并正在发送blob.但在控制器中我无法通过验证.当我尝试阅读验证时,它不包含任何错误.

我的Foto.PHP有问题吗?或者它在我的控制器中?

Javascript发送POST:

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;
}
}

和控制器:

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())));
    }
}

解决方法

您必须在请求中添加以下标头:
enctype: multipart/form-data

否则,symfony无法识别“部件”,而Request->文件为空.

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

猜你在找的JavaScript相关文章