在react中实现文件上传的最简单直接的方法是什么

Question

我有一个简单的表单，我正在尝试添加一个文件上传按钮，以便用户能够上传图像。

我看过的所有教程都在使用axios。我不需要这样，我只专注于前端。

实现这一目标最直接的方法是什么？

编辑：如果我的问题不够清楚，我深表歉意。基本上，我只想让用户能够在这个简单的表单中上传一个图像，然后当他们按下Add时，这个新对象就会被添加到数组中，然后被渲染(我已经完成了这一部分(。我只需要知道如何捕获他们的.jpg或.png文件，然后将其添加到我的对象中

interface playerInterface {
id: number
name: string
club: string,
image?: string
}

Answer 1

如果您只想获得有关文件的信息，请使用

<input type="file">

如果你想得到整个文件，你可以使用FileReader并从输入读取数据

const [file, setFile] = React.useState();
const onChange = (event) => {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
setFile(event.target.result)
};
reader.readAsText(file);
}
return <><input type="file" onChange={onChange} /></>

之后，你将有你的整个文件在状态