如何在react中处理多个文件，并显示要上传的文件列表

Question

我想弄清楚如何显示要上传的文件列表。上传单个文件是可以的，我在循环中尝试了console.log()，它显示了所有的列表。但是，它不会设置或添加到我想要的当前状态并显示在列表中。

const Upload = () => {
const [file, setFile] = useState([]);
const uploadFileRef = useRef();
const addFile = (e) => {
e.preventDefault();
if (e.target.files[0]) { // IF THERE ARE FILES TO BE UPLOADED
var pendingFiles = [...file];
// console.log(e.target.files);
console.log(Array.from(e.target.files));
for (let i = 0; i < e.target.files.length; i++) {
console.log(e.target.files[i]); // DISPLAYS EACH FILE
pendingFiles = [...file, e.target.files[i].name]; 
setFile(pendingFiles);
}
}
};
const removeFile = (i) => {
setFile([...file.filter((_, index) => index !== i)]);
};
const BrowseFile = () => {
return (
<>
<label>
Upload
<input
type="file"
onChange={(e) => addFile(e)}
accept=".jpeg, .png, .jpg, .pdf"
ref={uploadFileRef}
multiple
/>
</label>
<button 
type="button"
onClick={() => {
console.log(file);
}}
>
CHECK FILES
</button> // CHECK FILES BUTTON JUST SHOWS THE LIST OF UPLOADED FILES
</>
);
};
return (
<>
<label>
Upload File:
</label>
<BrowseFile />
<ul
style={{ maxHeight: "20rem", minHeight: "10rem" }}
>
{file.map((val, index) => {
return (
<li
key={index}
>
<div >
<i></i> {val}
</div>
<button
type="button"
onClick={() => {
removeFile(index);
}}
>
Remove
</button>
</li>
);
})}
</ul>
</>
);
};

我还注意到，我需要一个FileReader来读取它的URL，以便我上传到后端。它需要在一个循环中，以便读取每个文件，以便上传?

Answer 1

你必须像这样添加它们:

const [images, setImages] = useState();
if (e.targer.files[0]){
let target = e.targer
setImages( prevValue => ({
...prevValue,
[target.name]: [target.files[0]]
})
)

Answer 2

要添加这些文件，我们可以定义一个名为addFile的函数，它将event object作为参数。它从event object的target属性中提取文件列表(这些文件是由用户选择的)。然后可以创建一个名为fileNames的空数组，并使用for循环遍历文件列表。对于用户选择的每个文件，我们将文件名添加到fileNames数组中。我们将使用React的useState钩子并定义一段状态，在本例中它将是:

const [userFiles, setUserFiles] = React.useState([])

最后，我们的函数调用setUserFiles函数，并将userFiles(来自我们的状态)数组和新创建的fileNames数组的连接传递给它。

const addFile = (e) => {
const files = e.target.files;
const fileNames = [];
for (let i = 0; i < files.length; i++) {
fileNames.push(files[i].name);
}
setUserFiles([...userFiles, ...fileNames]);
};

然后我们可以在JSX中使用userFiles，我们检查userFiles数组是否有任何项—如果有，我们可以循环它们并输出userFiles数组中的文件名称。作为列表项的一部分，你可以使用在上面的代码示例中已经拥有的removeFile函数，并将index传递给它。

{userFiles.length > 0 && (
<ul>
{userFiles.map((val, index) => {
return (
<li key={index}>
<span>{val}</span>
<button
type="button"
onClick={() => {
removeFile(index);
}}
>
Remove
</button>
</li>
);
})}
</ul>
)}