如何在Div上触发React中的文件上传

  • 本文关键字:文件 React Div reactjs
  • 更新时间 :
  • 英文 :


你好,我这里有一个div组件,想触发文件上传。点击div可以吗?

<div className="relative w-[150px] cursor-pointer">
{" "}
<Avatar className="mt-5" size="150" round={true} />{" "}
<div className="rounded-full p-2 bg-white absolute  bottom-0 right-0">
<AiFillEdit className="text-blue-700" />
</div>
</div>

是的,但您需要先将onClickonChange事件触发到某个input type="file",然后"绑定";这个输入到你的组件上有一个onClick方法

const onUpload = () => {
document.getElementById('uploadFile').click();
}
const selectFile = () => {
const [file] = document.getElementById('uploadFile').files
console.log(file)
}
....
<div className="rounded-full p-2 bg-white absolute  bottom-0 right-0">
<AiFillEdit className="text-blue-700" />
<input type='file' id="uploadFile" style={{display: 'none'}} onChange={selectFile} />
</div>

我希望这对你有帮助。感谢

最新更新