搜索fab / media-upload
基于HTML5技术并由Fine Uploader（http://fineuploader.com/）驱动的前端批量上传文件的流体小部件
Requires
- typo3/cms-core: ^11.5
Replaces
- fab/media_upload: 3.0.4
- typo3-ter/media_upload: 3.0.4
README
此扩展为TYPO3 CMS提供了一个Fluid小部件，用于前端使用HTML5技术（批量）上传媒体。一旦用户选择，媒体将直接上传到typo3temp内的临时空间。表单提交后，可以通过UploadService检索上传的文件。
如果表单在最终提交前有一个“显示”步骤，则可以通过另一个小部件显示上传的图像。
文件上传由Fine Uploader处理，这是一个旨在在网络上提供用户友好文件上传体验的JavaScript插件。该插件依赖于HTML5技术，它允许从桌面拖放。如果支持，则通过Ajax实现文件传输。如果不支持，则使用通过提交文件的传统文件上传回退方法。（尽管如此，遗留的方法仍然需要更彻底的测试）。
文件上传后，用户可以验证并可能将其从列表中删除。
安装
安装分为两步。在扩展管理器中按正常方式安装扩展。然后，加载包含上传小部件的页面的JavaScript / CSS。该扩展假设已加载jQuery。
# CSS EXT:media_upload/Resources/Public/Build/media_upload.min.css # JavaScript EXT:media_upload/Resources/Public/Build/media_upload.min.js
上传小部件
您可以使用媒体上传小部件。语法如下
# Minimum syntax
<mu:widget.upload storage="1"/>
{namespace mu=Fab\MediaUpload\ViewHelpers}
# With some more attributes... We assume we have a property "images" in our model
# and this value could be something different like "documents" or whatever.
<mu:widget.upload allowedExtensions="jpg, png" storage="1" property="images"/>
# Required attributes:
# --------------------
#
# - storage
# Default values:
# ---------------
#
# The Storage identifier to get some automatic settings, such as allowedExtensions, default NULL.
# storage = 1
#
# Allowed extension to be uploaded. Override the allowed extension list from the storage. default NULL.
# allowedExtensions = "jpg, png"
#
# Maximum size allowed by the plugin, default 0.
# maximumSize =
#
# The unit used for computing the maximumSize, default Mo.
# sizeUnit = Mo
#
# Maximum items to be uploaded, default 10.
# maximumItems = 10
#
# The property to be used for retrieving the uploaded images, default NULL.
# property = foo
在第二步中查看上传的图像
<mu:widget.showUploaded /> <mu:widget.showUploaded property="images" /> # The property to be used for retrieving the uploaded images, default NULL. # property = foo
上传服务
一旦文件在前端上传并放置在临时目录中，我们必须检索它们并将它们存储在其最终位置。此代码可以在您的控制器中使用
/**
* @var \Fab\MediaUpload\Service\UploadFileService
* @inject
*/
protected $uploadFileService;
/**
* @return void
*/
public function createAction() {
/** @var array $uploadedFiles */
$uploadedFiles = $this->uploadFileService->getUploadedFiles()
# A property name is needed in case specified in the Fluid Widget
# <mu:widget.upload property="images"/>
$uploadedFiles = $this->uploadFileService->getUploadedFiles('images')
# Process uploaded files and move them into a Resource Storage (FAL)
foreach($uploadedFiles as $uploadedFile) {
/** @var \Fab\MediaUpload\UploadedFile $uploadedFile */
$uploadedFile->getTemporaryFileNameAndPath();
$storage = GeneralUtility::makeInstance(ResourceFactory::class)->getStorageObject(1);
/** @var File $file */
$file = $storage->addFile(
$uploadedFile->getTemporaryFileNameAndPath(),
$storage->getRootLevelFolder(),
$uploadedFile->getFileName(),
\TYPO3\CMS\Core\Resource\DuplicationBehavior::RENAME
);
# Note: Use method `addUploadedFile` instead of `addFile` if file is uploaded
# via a regular "input" control instead of the upload widget (fine uploader plugin)
# $file = $storage->addUploadedFile()
$fileReference = $this->objectManager->get(\YourVendor\YourExtensionKey\Domain\Model\FileReference::class);
$fileReference->setFile($file);
$yourDomainObject->addImages($fileReference);
}
...
}
FAL中的文件配置
如何配置文件类型的字段/属性？
SQL
CREATE TABLE tx_domain_model_foo (
images varchar(255) DEFAULT '' NOT NULL,
);
TCA
$TCA['tx_domain_model_foo'] = array(
'images' => array(
'label' => 'Images',
'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
'images',
array(
'appearance' => array(
'createNewRelationLinkTitle' => 'LLL:EXT:cms/locallang_ttc.xlf:images.addFileReference'
),
'minitems' => 0,
'maxitems' => 1,
),
$GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
),
),
);
模型
您的域模型应包含一个addImages方法，用于$yourDomainObject->addImages($fileReference);的目的。请参见上述上传服务中的代码。
/**
* Images
* @var \TYPO3\CMS\Extbase\Persistence\ObjectStorage<\TYPO3\CMS\Extbase\Domain\Model\FileReference>
*/
protected $images;
public function addImages(\TYPO3\CMS\Extbase\Domain\Model\FileReference $image) {
$this->images->attach($image);
}
文件引用模型
我们必须扩展文件引用，以便实现$fileReference->setFile($file);的目的。请参见上述上传服务中的代码。
namespace YourVendor\YourExtensionKey\Domain\Model;
class FileReference extends \TYPO3\CMS\Extbase\Domain\Model\FileReference {
/**
* @params \TYPO3\CMS\Core\Resource\File $file
*/
public function setFile(\TYPO3\CMS\Core\Resource\File $file) {
$this->originalFileIdentifier = (int)$file->getUid();
}
}
配置Extbase持久性
- ::
最后，我们必须配置Extbase的持久性层。您现在必须创建以下php文件：“YourExtensionFolder”ConfigurationExtbasePersistanceClasses.php”，请参见https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/10.0/Breaking-87623-ReplaceConfigpersistenceclassesTyposcriptConfiguration.html
<?php declare(strict_types=1); return [
- YourVendorYourExtensionKeyDomainModelFileReference::class => [
'tableName' => 'sys_file_reference', 'properties' => [
- 'originalFileIdentifier' => [
- 'fieldName' => 'uid_local',
],
],
],
];
安全
默认情况下，媒体上传需要前端用户进行身份验证。这可以根据您的需求通过仅选择允许的前端用户组进行调整。此行为可以通过TypoScript进行配置。
plugin.tx_mediaupload {
settings {
# "*", means every authenticated User can upload. (default)
# "1,2", means every User belonging of Frontend Groups 1 and 2 are allowed.
# no value, everybody can upload. No authentication is required. Caution!!
allowedFrontendGroups = *
}
}
TYPO3中允许/拒绝文件类型的限制行为已更改。
计划任务
在typo3temp中包含的临时文件有时需要清除。如果用户没有最终完成上传，可能会留下文件。可以通过具有低冗余的调度任务使用此命令，例如每周一次。
# List all temporary files ./vendor/bin/typo3cms mediaupload:removeTempFiles rundry # Remove them. ./vendor/bin/typo3cms mediaupload:removeTempFiles
在开发中构建资产
此扩展提供了包含所有必要代码的JS / CSS包。如果您需要为这些JS / CSS文件创建新的构建，请考虑在您的系统上安装Bower和Grunt作为先决条件。[Bower](http://bower.io/) 和 [Grunt](https://grunt.node.org.cn/)。
安装所需的Web组件
cd typo3conf/ext/media_upload # This will populate the directory Resources/Public/WebComponents. bower install # Install the necessary NodeJS package. npm install
然后您必须从源代码构建Fine Uploader
cd Resources/Private/BowerComponents/fine-uploader # Install the necessary NodeJS package inside "fine-uploader". npm install # Do the packaging works. It will create a "_dist" directory containing the build. grunt package
最后，您可以使用扩展的Grunt来生成构建
cd typo3conf/ext/media_upload grunt build
在开发过程中，您可以使用watch功能，该功能会在您编辑文件时生成构建
grunt watch
3.x版本重大变更
当从低于3的版本升级到版本3，并将TPO3版本从9更改为10时，extbase持久性映射的配置需要从TypoScript更改为PHP类。请参阅：配置Extbase持久性
调度任务现在应该通过TYPO3命令行命令运行。
未来的待办事项
将信号槽调用替换为PSR-14中间件请求