如何在react js中使用Hooks上传/浏览并在网页上显示图像

Question

当我浏览图像时，我想在网页中使用react js中的Hooks来显示这一点？像这样。。。。样本输出

Answer 1

这里有一个钩子的例子

import { useState } from "react";
export default function App() {
const [file, setFile] = useState(null);
const handleChange = (event) => {
setFile(URL.createObjectURL(event.target.files[0]))
}
return (
<>
<input type="file" onChange={handleChange}/>
<img src={file} />
</>
);
}