时间戳

首页 > 解决方案 > 使用 react-hook-form 上传的图像字段在前端工作，但在 next.js API 路由中，req.body.image 是一个空对象

file-upload - 使用 react-hook-form 上传的图像字段在前端工作，但在 next.js API 路由中，req.body.image 是一个空对象

问题描述

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

输入注册：

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

}

关于表单提交功能：

    const onSubmitForm = async data => {
        axios.post("/api/products", data, { headers: { "Content-Type": "multipart/form-data" } });
    };

在浏览器控制台中，数据对象为： { image: FileList }

products API 路径中的代码是：

import { NextApiRequest, NextApiResponse } from "next";

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

在控制台中，结果为： { image: { '0': {} } }

标签： file-uploadnext.jsreact-hook-form

解决方案

我也使用 react-hook-form，但在图片上传的情况下，事实是这个输入把它遗漏了，我没有看到它有用，我的做法是这样的：

在前端，你应该使用这样的东西：

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"/>

在后端，我建议您使用express-fileupload 之类的库：

在我的情况下，在你的 index.js 中使用 express，添加：

import fileUpload from "express-fileupload";
app.use(fileUpload());

在你的控制器中你的模型：

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" };

以上根据库变化，也可以使用multer。

我希望我对你有所帮助，祝你好运。

推荐阅读