在javascript中发送FormData中的FileList

Question

我正在尝试使用 FormData 发送一堆图像，但当然，我无法发送 FileList，而且我未能找到发送这些文件的方法。我已经尝试自己寻找答案，但大多数人建议附加每个文件。

for (let i = 0 ; i < images.length ; i++) {
    formData.append("images[]", images[i]);
}

但它最终只包含 formData 中的最后一个文件，由于某种原因，先前的文件正在被下一个文件替换。

我也尝试过将 FileList 转换为数组，这可行，但我不知道如何分离这些文件，现在每个文件都作为一个字符串在一个键中。

0: "[{\"lastModified\":1606255989000,\"lastModifiedDate\":\"undefined\",\"name\":\"logo.png\",\"size\":54438,\"type\":\"image/png\"},{\"lastModified\":1606255979000,\"lastModifiedDate\":\"undefined\",\"name\":\"logo1.png\",\"size\":58023,\"type\":\"image/png\"},{\"lastModified\":1606252752000,\"lastModifiedDate\":\"undefined\",\"name\":\"logo2.png\",\"size\":28147,\"type\":\"image/png\"},{\"lastModified\":1606255121000,\"lastModifiedDate\":\"undefined\",\"name\":\"logo3.png\",\"size\":18260,\"type\":\"image/png\"}]"

我可以将它转换为字符串，然后使用 } 作为每个条目的末尾将其切割成自己的键。我不想这样做，即使我的经验很少，我也知道这不是一个好的方法。

截至目前，我的 javascript 代码如下所示。

 File.prototype.toObject = function () {
  return Object({
    lastModified: parseInt(this.lastModified),
    lastModifiedDate: String(this.lastModifiedDate),
    name: String(this.name),
    size: parseInt(this.size),
    type: String(this.type)
    })
  }

  FileList.prototype.toArray = function () {
    return Array.from(this).map(function (file) {
      return file.toObject()
    })
  }

  let files = document.getElementById('files').files

  let filesArray = files.toArray();

  let formData = new FormData();

  formData.append('images[]', JSON.stringify(filesArray));

然后我像这样发送这些数据

fetch('<?=env('app.baseURL')?>/admin/gallery', {
      method: 'POST',
      processData: false,
      headers: {
          'X-Requested-With': 'XMLHttpRequest'
      },
      body: formData,
      data: formData,
      }).then(function (response) {...rest of the code...})

发送此数据后，接收没有任何问题我想保存这些文件，但我不能不先将它们分开。我在后端使用 PHP。

我对 javascript 没有太多经验，所以我可能遗漏了一些明显的东西，我们将不胜感激。

Answer 1

在 for 循环中，您可以为 formData 追加使用动态名称。例如：

formData.append(`image-${i}`, images[i])

或者，如果您想将图像推送到 formData 中的单个键值对，就像在您的示例中一样，您应该使用 getAll() 方法来检索图像。

formData.getAll('images[]')

Answer 2

这是遍历包含图像的数组的 PHP 代码：

<?php
if(isset($_FILES) && isset($_FILES['images'])){
    $countfiles = count($_FILES['images']['name']);
    for($i=0;$i<$countfiles;$i++){
        $filename = $_FILES['images']['name'][$i];
        $sql = "INSERT INTO myimages (filename) VALUES ('".$filename."')";
        $db->query($sql);
        move_uploaded_file($_FILES['images']['tmp_name'][$i],'upload/'.$filename);
    }
}
?>

在javascript中发送FormData中的FileList

Send FileList in FormData in javascrirpt

javascript

php

codeigniter

form-data

filelist