Cách tải lên hình ảnh bằng angular + symfony + vichuploaderBundle

Question

Tôi đang cố tải lên hình ảnh bằng angular và vichUploaderBundle cho symfony.

Ý tưởng là như sau,

Tôi có một số tab, nếu bạn bấm vào chúng họ sẽ hiển thị các hình thức khác nhau, một trong số họ là dành cho tập tin tải lên. Câu hỏi của tôi là, Làm cách nào để tải hình ảnh lên? Ý tôi là cách chính xác. Tôi có tệp html.twig, có biểu mẫu bên trong (tôi đang sử dụng bao gồm công cụ xoay vòng). Giả sử tôi có form.html.twig này

<form onsubmit="{{ path('upload-new-file') }}"> 
    <input type="file" id="someFile"/> 
     <button> Upload Image </button> 
</form> 

Một khi bạn đã chọn hình ảnh, nhấp chuột vào Tải lên, điều này sẽ xác định URL phù hợp với tải lên mới-file (routing.yml) (ví dụ, Nó sẽ làm một số truy vấn để tải lên tệp)

Vấn đề chính của tôi là tôi bị nhầm lẫn vì tôi đã lập trình biểu mẫu của mình bằng php (sử dụng createForm, form-> isvalid, v.v.) và sau đó hiển thị chúng bằng cành cây , Tôi cũng đang sử dụng vichUploaderBundle. Trong tình huống mà tôi đã mô tả tôi không thể làm điều đó, bởi vì tôi không có "biểu mẫu" để hiển thị nó. ({{form (form)}}). Tôi không chuyển biểu mẫu dưới dạng tham số theo cách thông thường (như trong tài liệu symfony; $ this-> render ('someTemplate.html.twig', mảng ('form' => $ form)))

Hãy tưởng tượng rằng chúng tôi có một trang web, với các tab và nếu bạn nhấp vào một trong các tab, nó sẽ hiển thị một số biểu mẫu, một trong các biểu mẫu chứa đầu vào tải lên, bạn chọn một hình ảnh và nhấp vào tải lên, sau đó? Nhớ lại rằng tôi đang sử dụng angularjs, vichuploaderbundle, symfony và Doctrine như ORM.

Cảm ơn trước!

Answer 1

tập cành lá

{{ form_start(form, {'attr': {'novalidate': 'novalidate'} }) }} 
      <div class="form-group"> 
       <label>{{"news.lbl.file"|trans}}</label> 
       {{form_widget(form.file)}} 
       <lable>{{form_errors(form.file)}}</lable> 
      </div> 
    <div class="form-group"> 
       {{form_widget(form.submit)}} 
      </div> 
      {{ form_end(form)}} 

lớp uploder

<?php 

namespace BaseBundle\Entity; 

use Doctrine\ORM\Mapping as ORM; 
use Symfony\Component\Validator\Constraints as Assert; 
use Symfony\Component\HttpFoundation\File\UploadedFile; 

abstract class Uploader 
{ 

    /** 
    * @var integer 
    * 
    * @ORM\Column(name="id", type="integer") 
    * @ORM\Id 
    * @ORM\GeneratedValue(strategy="AUTO") 
    */ 
    private $id; 

    /** 
    * @var string 
    * 
    * @ORM\Column(name="path", type="string", length=500,nullable=true) 
    */ 
    protected $path; 

    /** 
    * Set imageUrl 
    * 
    * @param string $path 
    * @return Category1 
    */ 
    public function setPath($path) 
    { 
     $this->path = $path; 

     return $this; 
    } 

    /** 
    * Get path 
    * 
    * @return string 
    */ 
    public function getPath() 
    { 
     return $this->path; 
    } 

    /** 
    * Get id 
    * 
    * @return integer 
    */ 
    public function getId() 
    { 
     return $this->id; 
    } 

    public function getAbsolutePath() 
    { 
     return null === $this->path ? null : $this->getUploadRootDir() . '/' . $this->path; 
    } 

    public function getWebPath() 
    { 
     return null === $this->path ? null : $this->getUploadDir() . '/' . $this->path; 
    } 

    protected function getUploadRootDir($docroot="web") 
    { 
// the absolute directory path where uploaded 
// documents should be saved 
     return __DIR__ . "/../../../../$docroot/" . $this->getUploadDir(); 
    } 

    protected abstract function getUploadDir(); 

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

    /** 
    * Sets file. 
    * 
    * @param UploadedFile $file 
    */ 
    public function setFile(UploadedFile $file = null) 
    { 
     $this->file = $file; 
    } 

    /** 
    * Get file. 
    * 
    * @return UploadedFile 
    */ 
    public function getFile() 
    { 
     return $this->file; 
    } 

    public function upload() 
    { 
     // the file property can be empty if the field is not required 
     if (null === $this->getFile()) 
     { 
      return; 
     } 
// use the original file name here but you should 
// sanitize it at least to avoid any security issues 
// move takes the target directory and then the 
// target filename to move to 
     $name = $this->getUploadDir() . "/" . time() . "-" . $this->getFile()->getClientOriginalName(); 
     $this->getFile()->move(
       $this->getUploadRootDir(), $name 
     ); 
// set the path property to the filename where you've saved the file 
     $this->path = $name; 
// clean up the file property as you won't need it anymore 
     $this->file = null; 
    } 

} 

lớp thực thể

class entity extends Uploder 
{ 

protected function getUploadDir() 
    { 
     return 'dirctory name'; 
    } 
} 

và thêm đường dẫn nộp sau đó remov đường