如何将多个文件输入附加到 formData？

Question

我有一个基本的多文件输入。选择一张或多张图片时，我会触发一个 uploadImages 函数。这个函数 returns 是一个错误，因为我似乎无法遍历我的文件以将它们附加到 formData:

error TypeError: files.forEach is not a function

哪里错了？

<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);
  }
}

Answer 1

目前，HTMLInputElement.files returns a FileList 而不是 Array。这意味着您不能在其上使用数组方法。将来，这可能会更改为扩展 Array.

您可以使用

files = [...files]

在函数的开头将 FileList 转换为 Array。

如何将多个文件输入附加到 formData？

How to append multiple files input to formData?

javascript

form-data