javascript - 使用表单数据上传多个文件，表单数据结构在 1 个文件、2 个文件和 3 个以上文件上发生变化

Question

上传1个文件时，数据结构如下:

files.<custom_file_upload_name>.FileObject

例如

files.fileUpload.name  -> image.jpg

上传2个文件时，数据结构如下:

files.<custom_file_upload_name>[ {File object}, {File object} ]

例如

files.fileUpload[0].name  -> image1.jpg
files.fileUpload[1].name  -> image2.jpg

上传3个文件时，数据结构如下:

files.<custom_file_upload_name>[ [{File object}, {File object}], {File object} ]

例如

files.fileUpload[0][0].name  -> image1.jpg
files.fileUpload[0][1].name  -> image2.jpg
files.fileUpload[1].name  -> image3.jpg

有了 4 个文件，数据结构变得更加复杂

文件.文件上传 ->

[ 
    [ 
        [ 
            {fileObject}, 
            {fileObject} 
        ],
        {fileObject} 
    ],
    {fileObject} 
]

在 ubuntu 16.04、Mozilla 和 Chrome 上尝试了不同的浏览器。两者的问题是一样的。

HTML 输入( Angular 前端):

<input type="file" (change)="onUploadChange($event)" multiple/>

文件到 FormData:

fileList: FileList = event.target.files;

if(fileList.length > 0) {
 let formData = new FormData();
  for(let i = 0; i < fileList.length; i++) {
   let file: File = fileList.item(i);
   formData.append('fileUpload', file);
  }
}

我将表单数据发布到后端并进行处理。它可以工作，但是所有这些具有不同数量文件的不同情况看起来很奇怪，这可能是浏览器特定的问题吗？

files.fileUpload 应该包含一个包含所有文件的数组，但数据结构与 1、2 和 3+ 文件不同。

Answer 1

我通过一次上传一个文件解决了这个问题。

我为每个上传的文件制作了 Angular formControl，并尝试在 formData 中再次上传它们，但问题仍然存在。

唯一的解决办法似乎是一个一个地上传文件。而且，我认为，它的效果要好得多。