【其中用到了 next 的 image ，与普通的 img 略有不同，注意一下】野路子程序员永远都是在靠需求学习😂今天做了一个前端传图片给后端的功能，简单记录一下，包括点击一个自定义的image块，触发选择图片，选择后展示预览。生成 form-data（传递给后端的body）
思路
- 页面创建 image，input –>
- input 加上 ref 标记，添加其他两个属性限定为选择 image 的 input –>
- image 添加事件，onclick 通过 ref 调用 input onclick 事件打开文件选择器 –>
- 选择图片通过 input 的 onchange 事件把图片 blob 链接赋值给 image src 预览，以及把 file 写进 form-data
代码
const uploadRef = useRef(null);//创建ref
const [spaceCover, setSpaceCover] = useState("/add.svg");
const [formData, setFormData] = useState<any>({
spaceCover: [],//图片文件
spaceName: "",
spaceDesc: "",
channelName: "",
channelDesc: "",
});
<Image
src={spaceCover}
alt=""
width={100}
height={100}
className=" w-12 text-transparent h-12 rounded-lg border-[2px] border-blue-default bg-blue-light mb-12"
onClick={(e) => {
(uploadRef.current as any).click();//ref点击input事件
}}
/>
<input
ref={uploadRef}
type="file"//限定文件input
accept="image/*"//限定为图片文件
className=" hidden"//隐藏input
onChange={(e) => {
console.log(e.target.files);
if (e.target.files) {
console.log(URL.createObjectURL(e.target.files[0]));
setSpaceCover(URL.createObjectURL(e.target.files[0]));//临时预览图链接
setFormData({
...formData,
spaceCover: [e.target.files[0]],//赋值文件，这里只取了一张图片
});
}
}}
/>
相关链接
react ref 文档
