Symfony2 上传 javascript blob

Posted 2023-02-16

【中文标题】Symfony2 上传 javascript blob

【英文标题】：Symfony2 upload javascript blob

【发布时间】：2015-01-02 04:16:00

【问题描述】：

我正在尝试使用 blob 将使用画布创建的图像上传到 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())));
    

【问题讨论】：

感谢上面的代码，稍加修改后，我发现这个想法对我自己的使用非常有用！有趣的是，这篇文章也有一年多的历史了，这只是帮助我们所有人的另一种方式！抱歉，我对此没有答案，但我很好奇您是否遇到了文件上传到目标的文件夹权限？此外，我还必须在 TWIG 中添加一些隐藏的表单字段，包括表单标签的属性：enctype="multipart/form-data"。这是为了以防其他人偶然发现这个问题并仍在寻找解决方案！

@AaronBelchamber 我会尝试更新这个，并给出答案。我找到了一种方法来做我需要的事情。

@yeouuu，您可以并且应该回答您自己的问题，而不是用答案编辑您的问题。甚至还有一个 badge for it 你可能会考虑意见和赞成票。

@TonyChiboucas 这些编辑只是重命名和缩进修复......

你能仔细检查一下你是否在 Symfony 中收到了文件吗？我过去遇到过这个问题：Javascript 正在发送文件，PHP 正在接收文件，而 Symfony 没有。如果是这样，请告诉我，我会看看我的旧修复。

【参考方案1】：

您必须在请求中添加以下标头：

enctype: multipart/form-data

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

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