README

Symfony FormType 用于轻量级图片上传。

该扩展包需要 jQuery 才能正常运行。

此扩展包使用 FontAwesome 库：[https://fontawesome.com/license](https://fontawesome.com/license)

安装

Composer

请确保全局安装了 Composer，如 Composer 文档中的[安装章节](https://getcomposer.org.cn/doc/00-intro.md)所述。

打开命令行，进入项目目录并执行

$ composer require loicpennamen/raw-image-type

如果您不使用 Symfony Flex，您需要通过将扩展包添加到项目 `config/bundles.php` 文件中注册的扩展包列表来启用扩展包

// config/bundles.php
return [
    // ...
    LoicPennamen\RawImageTypeBundle\RawImageTypeBundle::class => ['all' => true],
];

添加表单主题

为了显示表单，您必须配置 twig 使用扩展包的模板，如下所示

# config/packages/twig.yaml
twig:
  paths:
    '%kernel.project_dir%/vendor/loicpennamen/raw-image-type/templates': RawImageTypeBundle
  form_themes:
    - "@RawImageTypeBundle\\raw_image_type.html.twig"

导入资产

将文件 `raw-image-type.css` 添加到您的应用程序样式。

// app.scss
@import "../../vendor/loicpennamen/raw-image-type/css/raw-image-type.css";

将文件 `raw-image-type.js` 添加到您的应用程序脚本。

// app.js
import $ from "jquery";
require('../../vendor/loicpennamen/raw-image-type/js/raw-image-type.js')($);

如何使用

在您的表单中

namespace App\Form;

use LoicPennamen\RawImageTypeBundle\Form\RawImageType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

class SiteConfigType extends AbstractType
{
  public function buildForm(FormBuilderInterface $builder, array $options)
  {
    $builder
      ->add('rawImage', RawImageType::class, [
         // Allowed file extensions
         'allowed_extensions' => ['.jpg', '.jpeg', '.png', '.gif', '.bmp'],
         // Delete existing file when filename option is specified and no data was posted
         'delete_if_empty' => true,
         // Display additional informations
         'debug' => false,
         // Text to display if no image was submitted
         'empty_text' => 'No image',
         // Desired file name after upload. See "shortname". Set to NULL or 'auto' to auto-generate a unique name
         'filename' => null,
         // Maximum width and height of the optimized posted image
         'max_width' => 1920,
         'max_height' => 1080,
         // Maximum width of the preview window, as CSS string
         'preview_max_width' => '100%',
         // Preview ratio - can be an arithmetic string
         'ratio' => '16/9',
         // Delete button title
         'remove_text' => 'Delete this image',
         // Required or not
         'required' => false,
         // Desired file name after upload - without the extension.
         'shortname' => null,
         // Where the actual file is stored
         'upload_path' => 'public/uploads/',
         
         // If your form is managing mapped Doctrine entities:
         'mapped' => false, 
      ])
      ;
  }
}

自定义渲染

您可以通过使用前缀为 `raw-image-type-` 的 CSS 类来自定义扩展包的视觉外观

raw-image-type-preview-wrapper
raw-image-type-preview
raw-image-type-preview-message
raw-image-type-clear-wrapper

如何与持久化实体一起使用

提交时，表单条目 `rawImage` 将包含一个 base64 图像。如果您想在数据库中持久化文件的路径，您可以考虑在实体中使用不同的字段名来保存此值作为字符串

// src/Entity/MyEntity

namespace App\Entity;

// ...

/**
 * @ORM\Entity(repositoryClass=MyEntityRepository::class)
 */
class MyEntity
{
    /**
    * This field will contain the path to the file on the server 
    * @ORM\Column(type="string", length=255, nullable=true)
    */
    private $image;
}

然后在表单提交时，使用 `LoicPennamen\RawImageTypeBundle\Services\RawImageTypeService` 内部的工具创建和清理服务器上的“物理”文件。

更多文档即将推出：此扩展包仍在开发中

loicpennamen / raw-image-type

维护者

详细信息