File upload 使用react钩子表单上传的图像字段在前端工作，但在next.js API路由中，req.body.Image是一个空对象

这是前端代码的核心部分：

输入注册：

return (
    <form onSubmit={handleSubmit(onSubmitForm)}>
            <input {...register("image")} type="file" />
    </form>
);

在浏览器控制台中，数据对象为： { 图像：文件列表 }

产品API路径中的代码为：

import { NextApiRequest, NextApiResponse } from "next";

export default (req: NextApiRequest, res: NextApiResponse) => {
  console.log(req.body)
};

在控制台中，结果是：

---

{image:{'0'：{}}

我也使用react-hook表单，但在图像上传的情况下，事实是这个输入忽略了它，我不认为它有用，我的方法是这样的：

const fileChangedHandler = async (e) => {
  const imageAvatar = new FormData()
  imageAvatar.append(
    "avatarImage",
    e.target.files[0]
  )
  await Server.updateAvatarUser(auth.user.id, imageAvatar);
}

在前端，您应该使用如下内容：

const fileChangedHandler = async (e) => {
  const imageAvatar = new FormData()
  imageAvatar.append(
    "avatarImage",
    e.target.files[0]
  )
  await Server.updateAvatarUser(auth.user.id, imageAvatar);
}

输入：

<label htmlFor="inputAvatar" >
   Cambiar imagen
</label>
<input type="file" accept=".jpg, .jpeg, .png" id="inputAvatar" onChange={fileChangedHandler} className="hidden"/>

在您的控制器和您的模型中：

const avatarImage = req.files.avatarImage;
const uploadPath = "public/images/avatars/" + avatarImage.name;
avatarImage.mv(uploadPath, function (error) {
  if (error) {
    console.log(error);
    return { error: "Error guardando el archivo" };
  }
});
return { success: "Archivo guardado" };

根据以上库的变化，您也可以使用

我希望我帮了你一些忙，祝你好运

const avatarImage = req.files.avatarImage;
const uploadPath = "public/images/avatars/" + avatarImage.name;
avatarImage.mv(uploadPath, function (error) {
  if (error) {
    console.log(error);
    return { error: "Error guardando el archivo" };
  }
});
return { success: "Archivo guardado" };