Forms 如何以TYPO3 v9.5的形式进行多重上传?

Forms 如何以TYPO3 v9.5的形式进行多重上传?,forms,file-upload,typo3,image-uploading,typo3-9.x,Forms,File Upload,Typo3,Image Uploading,Typo3 9.x,因为我使用的是TYPO3 v9.5.3,希望使用sysext“表单”,但无法通过邮件接受和发送多个上传 到目前为止我所做的: 覆盖标准.yaml文件 plugin.tx_form { settings { yamlConfigurations { 100 = fileadmin/Form/CustomFormSetup.yaml } } } 为“ImageUpload.html”创建了一个新的模板文件,并添加了: mult

因为我使用的是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>

因为现在我也看到按钮变成了复数版本,我现在可以在前端选择多个文件

什么问题仍然存在:

当我选择多个文件并发送表单(然后结果通过邮件发送)时,邮件包含除上传之外的所有内容。 当切换回单一上传版本时,除了一张图片外,一切都正常

有人能帮我吗? 当我有多个图像/上传时,我必须做什么才能使表单处理这些图像/上传


我也读了这篇文章,但它没有解决我的问题,因为我想在标准表单扩展中解决这个问题。

添加“多个”属性将使文件选择器能够选择多个文件。但是您需要扩展viewhelper“formvh:form.uploadedResource”来处理这些多个文件

甚至您也可以添加自己的viewhelper来实现您想要对上传的文件执行的操作

谢谢


此线程有点旧,但我在2020年仍面临同样的问题,并决定发布解决方案。如果任何有经验的Typo3开发人员能够纠正/补充我的答案,这将是非常棒的

  • 为文件上载创建新的表单元素。在扩展中,在Classes/Domain/Model下添加MultipleUpload.php:
  • <?php 
    
    namespace YOUREXTKEY\Domain\Model;
    use TYPO3\CMS\Form\Domain\Model\FormElements\GenericFormElement;
    
    class MultipleUpload extends GenericFormElement
    {
    }
    
    <?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
        }
    
    
    }
    
    <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/add MultipleUploadViewModel.js下,使用以下代码:
  • //Resources/Public/JavaScript/Backend/FormEditor/MultipleUploadViewModel.js 定义([ “jquery”, “TYPO3/CMS/Form/Backend/FormEditor/Helper” ],函数($,Helper){ "严格使用",; 返回(函数($,Helper){ /** *@私人 * *@var对象 */ var _formEditorApp=null; /** *@私人 * *@返回对象 */ 函数getFormEditorApp(){ 返回_formEditorApp; }; /** *@私人 * *@返回对象 */ 函数getPublisherSubscriber(){ 返回getFormEditorApp().getPublisherSubscriber(); }; /** *@私人 * *@返回对象 */ 函数getUtility(){ 返回getFormEditorApp().getUtility(); }; /** *@私人 * *@param对象 *@返回对象 */ 函数getHelper(){ 返回助手; }; /** *@私人 * *@返回对象 */ 函数getCurrentlySelectedFormElement(){ 返回getFormEditorApp().getCurrentlySelectedFormElement(); }; /** *@私人 * *@param混合试验 *@param字符串消息 *@param int messageCode *@返回无效 */ 函数断言(测试、消息、消息代码){ 返回getFormEditorApp().assert(测试、消息、消息代码); }; /** *@私人 * *@返回无效 *@1491643380 */ 函数_helperSetup(){ assert('function'=$.type(Helper.bootstrap), '视图模型帮助程序未实现“引导”方法', 1491643380 ); bootstrap(getFormEditorApp()); }; /** *@私人 * *@返回无效 */ 函数_subscribeEvents(){ /** *@私人 * *@param字符串 *@param数组 *args[0]=formElement *args[1]=模板 *@返回无效 */ getPublisherSubscriber().subscribe('view/stage/abstract/render/template/perform',函数(主题,参数){ if(args[0].get('type')=='MultipleUpload'){ getFormEditorApp().getViewModel().getStage().renderSimpleTemplateWithValidators(参数[0],参数[1]); } }); }; /** *@公众 * *@param对象formEditorApp *@返回无效 */ 函数引导(formEditorApp){ _formEditorApp=formEditorApp; _助手设置(); _subscribeEvents(); }; /** *发布公共方法。 *实现“显示模块模式”。 */ 返回{ 引导:引导 }; })($,助手); });
  • 在form.yaml文件中添加新的修整器:
  • 完成者: - 选项: 主题:“您的电子邮件主题” 收件人地址:您的电子邮件收件人 收件人名称:“” 发件人地址:您的电子邮件发件人 发件人姓名:您的电子邮件发件人姓名 答复地址:“” 复写地址:“” 盲碳公司
    <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 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); }); 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