首页 文章

如何使用angular symfony vichuploaderBundle上传图像

提问于
浏览
5

我正在尝试使用angular和vichUploaderBundle为symfony上传图像 .

这个想法如下,

我有一些标签,如果你点击它们,它们会显示不同的表格,其中一个用于文件上传 . 我的问题是,我如何上传图片?我指的是正确的方法 . 我有一个html.twig文件,里面有一个表单(我正在使用包括twig引擎) . 假设我有这个form.html.twig

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

选择图像后,单击上传,这将确定哪个URL与upload-new-file(routing.yml)匹配(例如,它将执行一些查询以上载文件)

我的主要问题是我感到困惑,因为我一直在使用php编程我的表单(使用createForm,form-> isvalid等),然后使用twig渲染它们,我也使用vichUploaderBundle . 在我所描述的情况下,我无法做到这一点,因为我没有“形式”来呈现它 . ({{表单(form)}}) . 我没有以通常的方式将表单作为参数传递(例如在symfony docs中; $ this-> render('someTemplate.html.twig',array('form'=> $ form)))

想象一下,我们有一个带有标签的网页,如果你点击其中一个标签,它会显示一些表格,其中一个表格包含一个上传输入,你选择一个图像并点击上传,那么呢?回想一下,我使用angularjs,vichuploaderbundle,symfony和Doctrine作为ORM .

提前致谢!

1 回答

  • -1

    树枝文件

    {{ 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)}}
    

    上课

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

    实体类

    class entity extends Uploder
    {
    
     protected function getUploadDir()
        {
             return 'dirctory name';
        }
    }
    

    然后添加字段路径然后删除路径

相关问题