TYPO3 10.4 自定义后端模块/前端插件能否调用内置文件浏览器？

适用于TYPO3 v11/v12 LTS版本，基于核心ElementBrowser组件实现，无需额外依赖。

实现步骤 #

• 配置控制器参数
  在你的后端模块对应控制器的动作方法中加入元素浏览器初始化配置：

// 初始化文件浏览器参数
$browserParams = [
    'mode' => 'file',
    'allowedExtensions' => $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'],
    'target' => 'your_custom_field' // 替换为你自定义的表单字段标识
];
$this->view->assign('browserQueryParams', http_build_query($browserParams));

• 前端模板添加触发按钮
  在后端模板文件中添加触发文件浏览器的按钮和存储选中文件ID的隐藏字段，原本的本地上传控件可以保留并行使用：

<button type="button" class="btn btn-primary" id="openTypo3FileBrowser">从文件库选择图片</button>
<input type="hidden" name="uploaded_file_uid" id="selectedFileId" value="">

预期效果参考：

• 绑定JS交互逻辑
  在模板底部引入TYPO3核心ElementBrowser模块，绑定点击和选择回调：

require(['TYPO3/CMS/Recordlist/ElementBrowser'], function(ElementBrowser) {
    // 点击打开文件浏览器
    document.querySelector('#openTypo3FileBrowser').addEventListener('click', () => {
        const browserUrl = `${TYPO3.settings.ajaxUrls.element_browser}&{browserQueryParams}`;
        ElementBrowser.openPopUpUrl(browserUrl, 'typo3_file_browser', 850, 650);
    });

    // 注册文件选中回调
    window.setFormValueFromBrowseWin = (fieldName, fileUid, fileName, filePath, tableName) => {
        if (fieldName === 'your_custom_field') { // 和上方配置的target保持一致
            document.querySelector('#selectedFileId').value = fileUid;
            // 可在这里追加自定义逻辑：比如生成选中文件预览、填充其他文件信息字段等
        }
        ElementBrowser.closePopUp();
    };
});

• 后端处理选中文件
  表单提交后，通过文件UID获取对应文件对象完成业务逻辑：

$selectedFileUid = (int)$this->request->getParsedBody()['uploaded_file_uid'];
if ($selectedFileUid > 0) {
    // 获取文件对象
    $file = \TYPO3\CMS\Core\Resource\ResourceFactory::getInstance()->getFileObject($selectedFileUid);
    // 执行你的自定义逻辑：比如关联到对应记录、复制文件到指定目录、生成缩略图等
}

可选配置 #

• 如需限制可选文件类型，修改allowedExtensions参数即可，示例：$browserParams['allowedExtensions'] = 'jpg,png,gif'
• 如需支持同时选择多个文件，给参数添加'allowMultiSelect' => 1即可，回调中会返回多个文件UID的数组
• 可自行调整openPopUpUrl方法的第三、第四参数修改弹出窗口的宽高

内容的提问来源于stack exchange，提问作者Wintermilch