バージョン選択

フォーラム

メニュー

オンライン状況

46 人のユーザが現在オンラインです。 (41 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 46
もっと...

サイト内検索

質問 > 管理機能 > 画像アップロードを管理画面に追加(綺麗な書き方を教えてください)

管理機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
shiftbank
投稿日時: 2021/4/26 14:56
対応状況: −−−
新米
登録日: 2018/6/29
居住地:
投稿: 10
画像アップロードを管理画面に追加(綺麗な書き方を教えてください)
[EC-CUBE] 4.0.5
[PHP] 7.4
[データベース] Maria
[WEBサーバ] Apache

商品情報に画像を追加する、画像アップロード処理を書きました。一応動作してはいます。
ただ、手探りすぎてコードの置き場所や処理の流れなどグチャグチャになっている気がします。
違和感のある箇所、ご指摘いただけないでしょうか。

商品情報に追加の画像をアップロードする機能です。
※最初からある画像アップロード機能と分離させたいのは、表示する場所が違うからです。
カラム名が雑なのは目を瞑ってください。

大まかな実装内容は↓です
・ProductTraitで商品情報に画像用カラムを追加
・ProductControllerに画像保存用処理を追加
・ProductControllerへPOSTするためのHTMLを表示

ProductTrait - 画像保存用カラムの追加と、フォーム項目の追加

    /**
     * @ORM\Column(name="feature_1_image_1", type="string", nullable=true)
     * @Eccube\FormAppend(
     *  auto_render=true,
     *  type="\Symfony\Component\Form\Extension\Core\Type\FileType",
     *  form_theme="Form\admin_image.twig",
     *  options={
     *      "required": false,
     *      "label":"特徴1画像1",
     *      "data_class":null,
     *  }
     * )
     */
    public $feature_1_image_1;

    public function setFeature1Image1($feature_1_image_1)
    {
        $this->feature_1_image_1 = $feature_1_image_1;
    }

    public function getFeature1Image1()
    {
        return $this->feature_1_image_1;
    }

疑問1: form_themeで指定するtwigファイルの保存場所は4つのディレクトリがあるようですが、管理画面用twigを置くに適したディレクトリは対象外な点。

admin_image.twig - 画像アップロードフォームのテンプレート

{%- block form_row -%}
<div class="row">
    <div class="col-3">
        <span>{{ form.vars.label|trans }}</span>
    </div>
    <div class="col mb-2 image-group">
        <div>
            {{ form_widget(form, {'attr': {'class': 'image-upload-form'}}) }}
            {{ form_errors(form) }}
        </div>
        {% if form.vars.data %}
        <img src="{{ asset(form.vars.data, 'save_image') }}" class="image-uploaded" alt="">
        <label for="{{ form.vars.name }}_delete"><input type="checkbox" name="{{ form.vars.name }}_delete" id="{{ form.vars.name }}">削除</label>
        {% else %}
        <img src="" class="image-uploaded" alt="">
        {% endif %}
    </div>
</div>
{%- endblock form_row -%}


テンプレートを新たに作った理由
・アップロード時のJavaScriptでの処理にクラスやプレビュー要素を表示するHTMLが欲しかった
・削除フラグをPOSTに載せるためのinput要素が欲しかった

別途、JavaScriptにてimg.image-uploadedへのプレビューを行ったりしています。


ProductController - 画像の登録や削除


「// 画像の登録」処理の直前に以下を記述しました

$images = preg_grep('/feature_(.*?)_image_(.*?)/', array_keys($form->all()));

foreach ($images as $key) {
    $image = $form->get($key)->getData();
    $isDelete = $request->get($key.'_delete');
    if (!$isDelete) {
        if (!empty($image)) {
            /**
             * 画像が入力された場合
             */
            $file = new File($image->getPathName());
            $fileName = sha1(uniqid(mt_rand(),true)) . '.' . $image->guessExtension();
            $file->move($this->eccubeConfig['eccube_save_image_dir'], $fileName);
            $Product->setFeature1Image1($fileName);
        }else{
            /**
             * 画像が入力されなかった場合。
             */
            // 現在保存されている画像パスをそのままセットする
            $Product->setFeature1Image1($featureImages['feature_1_image_1']);
        }
    }else{
        /**
         * 削除
         *
         * 何もしなければ自動的に削除される
         */

    }
}

疑問点2: 「維持する」方法がわからず、再度セットするという荒技になってしまいました。
疑問点3: FormAppendアノテーションを経由せずに追加した***_delete要素が、
$builder->getForm()->get('hoge')では取得できないのは何故なのか

疑問点4: どの時点でどこまでの情報が保存されているのかイマイチよくわからない
疑問点5: 画像アップロードのようなよく使われる機能はどこかに用意されていそうだが見つけられなかった。


そもそも勘違いしている点が多々あるかと思います。
一部でも、ココはこうした方がいいよ等あれば教えて欲しいです。

よろしくお願いします。
h_tanaka
投稿日時: 2022/12/16 19:40
対応状況: −−−
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1638
Re: 画像アップロードを管理画面に追加(綺麗な書き方を教えてください)
form_theme の使い方がおかしいです。
twig ファイルは app/template/admin 配下に配置すべきです。

画像アップロード機能は標準にあるので、それを複製して作成するのが良い気がします。


----------------
EC-CUBE 《プラチナ》ランクパートナー
トエビス株式会社 田中 宏典
EC-CUBEの機能やデザインのカスタマイズ承ります。

スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,689名です
総投稿数は109,935件です

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2313
5
umebius
2085
6
yuh
1819
7
h_tanaka
1638
8
red
1569
9
mcontact
1280
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.