OpenCart 3模块后台如何显示媒体库图片选择字段？尝试文本框无效

嘿，我之前正好折腾过OpenCart 3模块后台的图片选择功能，普通文本框肯定搞不定，得调用系统自带的媒体库弹窗才行。下面一步步给你拆解实现方法：

打开你的模块控制器文件 admin/controller/extension/module/[你的模块名].php，在处理后台表单的index()方法里，先加载媒体库的语言文件，同时把必要数据传递给视图：

// 加载媒体库的语言文件，确保弹窗内的文字正常显示
$this->load->language('common/filemanager');

// 传递管理员令牌，这是OC3请求验证的关键
$data['user_token'] = $this->session->data['user_token'];

// 把模块已保存的图片路径传递给视图，用于回显
$data['module_[你的模块名]_image'] = $this->config->get('module_[你的模块名]_image');

打开视图文件 admin/view/template/extension/module/[你的模块名].twig，把原来的普通文本框替换成带选择按钮、预览图的结构，同时添加触发媒体库的JS：

首先是图片选择的表单区域：

<div class="form-group">
    <label class="control-label" for="input-image">{{ entry_image }}</label>
    <div class="input-group">
        <!-- 设为readonly避免手动输入，仅通过媒体库选择 -->
        <input type="text" name="module_[你的模块名]_image" value="{{ module_[你的模块名]_image }}" placeholder="{{ placeholder_image }}" id="input-image" class="form-control" readonly />
        <div class="input-group-append">
            <button type="button" id="button-image" class="btn btn-secondary"><i class="fa fa-image"></i> 选择图片</button>
        </div>
    </div>
    <!-- 已选图片的预览区域 -->
    {% if module_[你的模块名]_image %}
    <img src="{{ module_[你的模块名]_image }}" alt="图片预览" class="img-thumbnail mt-2" style="max-width: 200px; max-height: 150px;" />
    {% endif %}
</div>

然后在模板底部添加JS代码，绑定按钮点击事件，调用系统媒体库弹窗：

<script type="text/javascript">
$('#button-image').on('click', function() {
    const targetInput = $('#input-image');
    const previewImg = $('.img-thumbnail');

    // 移除可能存在的旧弹窗
    $('#modal-image').remove();

    // 发起请求加载媒体库弹窗
    $.ajax({
        url: 'index.php?route=common/filemanager&user_token={{ user_token }}&target=' + encodeURIComponent(targetInput.attr('id')) + '&thumb=' + encodeURIComponent(previewImg.attr('id')),
        dataType: 'html',
        beforeSend: function() {
            $('#button-image').button('loading');
        },
        complete: function() {
            $('#button-image').button('reset');
        },
        success: function(html) {
            // 将媒体库弹窗添加到页面并显示
            $('body').append('<div id="modal-image" class="modal">' + html + '</div>');
            $('#modal-image').modal('show');
        }
    });
});
</script>

为了让提示文字更友好，打开你的模块语言文件 admin/language/zh-cn/extension/module/[你的模块名].php，添加对应的语言变量：

$_['entry_image'] = '模块展示图片';
$_['placeholder_image'] = '点击右侧按钮从媒体库选择图片';

• 确保你的管理员账号有**媒体库（common/filemanager）**的访问权限：进入「系统→用户→用户组」，编辑对应组的权限，找到「common/filemanager」并勾选允许访问。
• 如果是多语言站点，记得在对应语言的语言文件里同步添加上述变量。
• 测试时保存模块后刷新页面，确认图片路径能正确保存和回显。

这样折腾完，你的模块后台就能像系统自带的商品图片选择那样，调用媒体库来选图啦！

内容的提问来源于stack exchange，提问作者Игорь Нероденко