如何以TYPO3 v9.5的形式进行多重上传？
[英]How to multiupload in Form of TYPO3 v9.5?
问题描述
由于我使用的是 TYPO3 v9.5.3 并想使用 sysext“表单”，但无法管理它以通过邮件接受和发送多重上传。
到目前为止我做了什么：
覆盖标准 .yaml 文件
plugin.tx_form {
settings {
yamlConfigurations {
100 = fileadmin/Form/CustomFormSetup.yaml
}
}
}
为“ImageUpload.html”创建了一个新的模板文件并添加：
multiple="multiple"
所以现在看起来像这样：
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
<formvh:form.uploadedResource
property="{element.identifier}"
as="image"
multiple="multiple"
id="{element.uniqueIdentifier}"
class="{element.properties.elementClassAttribute}"
errorClass="{element.properties.elementErrorClassAttribute}"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
accept="{element.properties.allowedMimeTypes}"
>
<f:if condition="{image}">
<div id="{element.uniqueIdentifier}-preview">
<a href="{f:uri.image(image: image, maxWidth: element.properties.imageLinkMaxWidth)}" class="{element.properties.elementClassAttribute}">
<f:image image="{image}" maxWidth="{element.properties.imageMaxWidth}" maxHeight="{element.properties.imageMaxHeight}" alt="{formvh:translateElementProperty(element: element, property: 'altText')}" />
</a>
</div>
</f:if>
</formvh:form.uploadedResource>
</f:render>
</formvh:renderRenderable>
</html>
从现在开始，我还看到按钮更改为复数版本，现在我可以在前端选择多个文件。
还存在什么问题：
当我选择多个文件并发送表单（然后通过邮件发送结果）时，邮件包含除上传之外的所有内容。 当切换回单一上传版本时，一切正常，但只有一张图片。
有人可以帮助我吗？ 当我有多个图像/上传时，我必须做什么才能使表单处理图像/上传？
我也阅读了这个LINK但它没有解决我的问题，因为我想在标准的 Form 扩展中解决这个问题。
2 个解决方案
解决方案1
1 2020-04-02 12:31:25
这个帖子有点旧，但我在 2020 年仍然面临同样的问题，并决定发布一个解决方案。 如果任何有经验的 Typo3 开发人员会更正/添加到我的答案中，那就太棒了。
- 为文件上传创建一个新的表单元素。 在您的扩展中，在 Classes/Domain/Model 下添加 MultipleUpload.php：
<?php namespace YOUREXTKEY\\Domain\\Model; use TYPO3\\CMS\\Form\\Domain\\Model\\FormElements\\GenericFormElement; class MultipleUpload extends GenericFormElement { }
- 在您的表单设置 yaml 文件中，添加一个新的元素定义和一个新的整理器定义。 我的设置看起来像：
TYPO3:
CMS:
Form:
prototypes:
standard:
formEditor:
formEditorPartials:
FormElement-MultipleUpload: 'Stage/SimpleTemplate'
dynamicRequireJsModules:
additionalViewModelModules:
- 'TYPO3/CMS/YOUREXTKEY/Backend/FormEditor/MultipleUploadViewModel'
formElementsDefinition:
MultipleUpload:
formEditor:
label: 'MultipleUpload'
group: custom
groupSorting: 1000
iconIdentifier: 'form-text'
implementationClassName: 'YOUREXTKEY\Domain\Model\MultipleUpload'
Form:
renderingOptions:
properties:
elementClassAttribute: form
templateRootPaths:
100: 'EXT:YOUREXTKEY/Resources/Private/Templates/Forms/'
partialRootPaths:
100: 'EXT:YOUREXTKEY/Resources/Private/Partials/Forms/'
layoutRootPaths:
100: 'EXT:YOUREXTKEY/Resources/Private/Layouts/Forms/'
finishersDefinition:
MultipleUploadsFinisher:
implementationClassName: 'YOUREXTKEY\Finishers\MultipleUploadsFinisher'
- 在 Classes/Finishers/MultipleUploadsFinisher.php 下创建一个新的 Finisher。 我使用了标准 Email Finisher 中的代码，只编辑了文件附件位。
<?php namespace YOUREXTKEY\\Finishers; use TYPO3\\CMS\\Form\\Domain\\Model\\FormElements\\FileUpload; use TYPO3\\CMS\\Form\\Domain\\Finishers\\EmailFinisher; use YOUREXTKEY\\Domain\\Model\\MultipleUpload; use TYPO3\\CMS\\Form\\Service\\TranslationService; use TYPO3\\CMS\\Core\\Mail\\MailMessage; /** * Class MultipleUploadsFinisher */ class MultipleUploadsFinisher extends EmailFinisher { /** * Executes this finisher * @see AbstractFinisher::execute() */ protected function executeInternal() { ... copied code from EmailFinisher if ($attachUploads) { foreach ($elements as $element) { if (!$element instanceof MultipleUpload) { continue; } $files = $formRuntime[$element->getIdentifier()]; foreach ($files as $file) { if ($file) { $target_path = \\TYPO3\\CMS\\Core\\Utility\\GeneralUtility::getFileAbsFileName('fileadmin/user_upload/') . basename($file['name']); if (move_uploaded_file($file['tmp_name'], $target_path) ) { $mail->attach(\\Swift_Attachment::fromPath($target_path)); } // unlink($target_path); (if you wish to delete uploads, uncomment this line) } } } } ... copied code from EmailFinisher } }
- 在 Resources/Private/Partials/Forms 下添加 MultipleUpload.html 和以下代码：
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true"> <formvh:renderRenderable renderable="{element}"> <f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent"> <div class="form-file-wrapper "> <f:form.upload property="{element.identifier}" multiple="multiple" id="{element.uniqueIdentifier}" additionalAttributes="{multiple : '', accept : 'YOURMIMETYPES'}"/> <label for="{element.uniqueIdentifier}"> YOUR LABEL TEXT HERE </label> </div> </f:render> </formvh:renderRenderable> </html>
- 在 Resources/Public/JavaScript/Backend/FormEditor/ 下，使用以下代码添加 MultipleUploadViewModel.js：
// Resources/Public/JavaScript/Backend/FormEditor/MultipleUploadViewModel.js
define([
'jquery',
'TYPO3/CMS/Form/Backend/FormEditor/Helper'
], function ($, Helper) {
'use strict';
return (function ($, Helper) {
/**
* @private
*
* @var object
*/
var _formEditorApp = null;
/**
* @private
*
* @return object
*/
function getFormEditorApp() {
return _formEditorApp;
};
/**
* @private
*
* @return object
*/
function getPublisherSubscriber() {
return getFormEditorApp().getPublisherSubscriber();
};
/**
* @private
*
* @return object
*/
function getUtility() {
return getFormEditorApp().getUtility();
};
/**
* @private
*
* @param object
* @return object
*/
function getHelper() {
return Helper;
};
/**
* @private
*
* @return object
*/
function getCurrentlySelectedFormElement() {
return getFormEditorApp().getCurrentlySelectedFormElement();
};
/**
* @private
*
* @param mixed test
* @param string message
* @param int messageCode
* @return void
*/
function assert(test, message, messageCode) {
return getFormEditorApp().assert(test, message, messageCode);
};
/**
* @private
*
* @return void
* @throws 1491643380
*/
function _helperSetup() {
assert('function' === $.type(Helper.bootstrap),
'The view model helper does not implement the method "bootstrap"',
1491643380
);
Helper.bootstrap(getFormEditorApp());
};
/**
* @private
*
* @return void
*/
function _subscribeEvents() {
/**
* @private
*
* @param string
* @param array
* args[0] = formElement
* args[1] = template
* @return void
*/
getPublisherSubscriber().subscribe('view/stage/abstract/render/template/perform', function (topic, args) {
if (args[0].get('type') === 'MultipleUpload') {
getFormEditorApp().getViewModel().getStage().renderSimpleTemplateWithValidators(args[0], args[1]);
}
});
};
/**
* @public
*
* @param object formEditorApp
* @return void
*/
function bootstrap(formEditorApp) {
_formEditorApp = formEditorApp;
_helperSetup();
_subscribeEvents();
};
/**
* Publish the public methods.
* Implements the "Revealing Module Pattern".
*/
return {
bootstrap: bootstrap
};
})($, Helper);
});
- 在您的 form.yaml 文件中添加新的完成程序：
finishers:
-
options:
subject: 'YOUR EMAIL SUBJECT'
recipientAddress: YOUR EMAIL RECIPIENT
recipientName: ''
senderAddress: YOUR EMAIL SENDER
senderName: YOUR EMAIL SENDER NAME
replyToAddress: ''
carbonCopyAddress: ''
blindCarbonCopyAddress: ''
format: html
attachUploads: true
translation:
language: ''
templatePathAndFilename: 'EXT:YOUREXTKEY/Resources/Private/Templates/Forms/Email/Html.html'
identifier: MultipleUploadsFinisher
还有你的元素：
-
properties:
elementClassAttribute: 'col col-12 mt-3'
allowedMimeTypes:
- application/vnd.openxmlformats-officedocument.wordprocessingml.document
- application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
- application/pdf
- image/jpeg
- image/png
- text/plain
elementDescription: ''
type: MultipleUpload
identifier: fileupload-1
label: Files
解决方案2
0 2019-07-04 09:24:21
添加 'multiple' 属性将使文件选择器能够选择多个文件。 但是您需要扩展视图助手“formvh:form.uploadedResource”来处理这些多个文件。
甚至您可以添加自己的视图助手来实现您想要对上传的文件执行的操作。
谢谢。
在TYPO3 9.5中翻译EXT：form验证器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.