提问者:小点点

如何将多个文件输入追加到FormData?


我有一个基本的多文件输入。 当选择一个或几个图像时,我会触发一个uploadImages函数。 此函数返回一个错误,因为我似乎无法循环遍历我的文件以将它们追加到FormData:

错误类型错误:Files.foreach不是函数

这里的错误在哪里?

null

<input
        type="file"
        accept="image/png, image/jpeg"
        placeholder="upload"
        multiple
        onChange={(e) => uploadImages(e.target.files, 3)}
      />
      
export async function uploadImages(files, userid) {
  try {
    const images = new FormData();
    if (files && files.length > 0) {
      files.forEach((file) => images.append("image", file));
    }
    const res = await ax.post(
      process.env.SERVER_URL + "/upload-images",
      images,
      userid
    );
    return console.log("success", res);
  } catch (err) {
    console.log("error", err);
  }
}

null


共1个答案

匿名用户

目前,HTMLinputelement.files返回一个文件列表,而不是一个数组。 这意味着您不能对它使用数组方法。 将来,这可能会更改为扩展数组

您可以使用

files = [...files]

在函数开始时将文件列表转换为数组