从输入元素保存文件列表数组并访问文件

Question

我希望能够选择多个文件并将它们发送到我的后端，但不知道如何发送。

在app.js中，我有一个usestate，作为道具发送到我的文件上传组件。

但在选择文件后，我得到了具有正确数量的条目的FileList((，但它们在我的文件状态下都是未定义的。

如果我将onChange功能更改为：

(e) => setFiles(e.target.files[0])

或任何其他索引，我得到一个正确的文件。但是如何直接保存整个文件数组？

在下一步中，当我需要将文件发布到后端时，我可以按文件名访问它们吗？还是需要将它们存储为Blob或字节数组才能以json格式发送？

import React from "react";
export const FileUpload = ({ files, setFiles }) => {
return (
<div className="file-upload">
<span className="button">
<i className="material-icons">attachment</i>Choose files
</span>
<input
type="file"
multiple
className="multiple-files"
aria-label="Multiple file upload"
accept="image/*"
onChange={(e) => setFiles(e.target.files)}
/>
</div>
);
};

Answer 1

经过一番尝试和错误之后，我想出了这个解决方案：

const fileHandler = e => {
const fileArray = Array.from(e.target.files)
fileArray.map(f => f["id"] = Math.random() * Math.pow(10,16))
setFiles(fileArray)
}