EXTJS 7.2-使用Ext.field.File上传多个文件

问题描述

我正在尝试使用7.2.0现代文件字段上载多个文件。

var txtSiteCode = Ext.create('Ext.field.Text',{
        label: 'Site Code',required: true,name: 'site_code',responsiveConfig: {
            'width < 800': {
                labelAlign: 'top'
            },'width >= 800': {
                labelAlign: 'left'
            }
        }
                })
            }
        }
    }),fldFile = Ext.create('Ext.field.File',{
        label: 'Images',name: 'files',multiple: true,accept: 'image','width >= 800': {
                labelAlign: 'left'
            }
        },}),form = Ext.create('Ext.form.Panel',{
        url: 'data/test.PHP',method: 'post',enctype: 'multipart/form-data',items : [txtSiteCode,fldFile],})

提交表单时，我在$ _FILES数组中的服务器上仅收到1个文件。但是，从请求有效负载的大小来看，实际上所有文件都应该可用。

FILE COUNT: 1,referer:
[Thu Aug 20 09:05:09.715473 2020] [PHP7:notice] [pid 12749] Array\n(\n    [name] => FBK90084_Primary_14_PE4 (2).jpg\n    [type] => image/jpeg\n    [tmp_name] => /tmp/PHPxjd0pK\n    [error] => 0\n    [size] => 2973487\n)\n,

以上是对$ _FILE数组大小的计数，以及$ _FILE数组本身的转储。这是因为在文件选择器中选择了3个jpg文件。

Status200
OK
VersionHTTP/1.1
Transferred5.67 MB (0 B size)
Referrer Policyno-referrer-when-downgrade

上面是服务器的响应，您可以看到它的大小为5.7mb（在这种情况下，选择了2〜3mb个文件）

有人知道为什么$ _FILES数组不显示所有提交的文件吗？

更新：注意事项-如果我去手动在devtools中将呈现页面上字段的name属性设置为在其末尾包含“ []”，则可以获取多个文件以上传到服务器。然后，问题似乎是该表单未将文件输入视为多次上传并使用正确的“ name []”约定，并且EXT从名称字符串中去除了非字母数字字符，因此我似乎无法设置字段名称代码中的'files []'属性。我猜我可能可以覆盖它吗？只是不确定如何

解决方法

如果您不确定文件是否真的按预期发送，我建议您尝试将问题分离为两个主要问题。它们是前端（ext js）问题和后端（您在接收文件中的PHP脚本）的问题。我可以向您展示如何通过使用filefield配置中的更改侦听器来确保前端（sencha ext js）确实发送多个文件。

Ext.create('Ext.field.File',{
        label: 'Images',name: 'files',multiple: true,accept: 'image',responsiveConfig: {
            'width < 800': {
                labelAlign: 'top'
            },'width >= 800': {
                labelAlign: 'left'
            }
        },listeners:{
           change: function(el,v){
              let files = el.getFiles(); //get all files
              files.forEach(file=>{
                 console.log(file); //check your console,you will be shown the object of a file
              });
           }
        }
    }

检查文件是否以“ name []”的多个键形式参数或“ name”的形式（但包含多个文件）形式发送的另一种方法，只需在提交后检查浏览器中的网络工具后端，它将为您显示答案。