用react-hook-form上传的图像字段在前端工作，但在next.js API路由中，req.body.Image

Question

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

输入注册：

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

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

产品API路线中的代码为：

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

在控制台中，结果是：｛图像：｛"0"：｛｝｝｝

Answer 1

在前端设置此选项以进行文件选择和提交。

<input type="file" name="file" multiple id="files" onChange={onChangeFile} accept=".xlsx,.xls,image/*" />
<input type="button" onClick={submit}>Submit</button>

此函数将在select文件上启动并存储在数组中。

let images=[];
const onChangeFile = (event) => {
for (let i = 0; i < event.target.files.length; i++) {
images.push(event.target.files[i]);  
}
}

提交我们之前定义的数组，该数组将用于在NextJs API上传递文件数据。

const submit = () => {
let data = new FormData();
images.forEach((element, i) => {
data.append("theFiles[]", element);
});
const res = await fetch(`${baseUrl}api/postmessage`, {
method: "POST",
headers: {
Accept: "multipart/form-data",
},
body: data,
});
const resData = await res.json();
}

1=>在您的api/postmessage文件中，使用multer上传文件或使用其他lib或包。

2＝>您必须将Files变量赋予multer，并限制上传文件。

3=>在上传块中有fileNameList变量，用于存储上传的文件名(用于唯一名称(，之后您可以使用该数组存储在DB上上传文件，你可以在代码的底部看到。

import nextConnect from "next-connect";    
import multer from "multer";
let fileNameList = [];
const upload = multer({
storage: multer.diskStorage({
destination: (req, file, cb) => {
let path ='./public/uploads/';
cb(null, path);
},
filename: (req, file, cb) => {
const ext = file.mimetype.split("/")[1];
let fileName = `${Date.now()}${Math.floor(
Math.random() * 100
)}.${ext}`;
cb(null, fileName);
fileNameList.push(fileName);
},
}),
limits: {
fileSize: 1024 * 1024 * 5,
},
}).array("theFiles[]", 5);

const apiRoute = nextConnect({
onError(error, req, res) {
res.json({
status: false,
data: [],
oth: `Sorry something Happened! ${error.message}`,
});
},
onNoMatch(req, res) {
res.json({
status: false,
data: [],
oth: `Method '${req.method}' Not Allowed`,
});
},
});

apiRoute.post(async (req, res) => {
await upload(req, res, function (err) {
if (err) {
return res.json({
status: false,
data: "File uploading faled."
});
}
});
fileNameList.map(async (fileName) => {
await sql_query(
"INSERT INTO images (imagename) VALUES(?)",
[fileName],
"insert"
);
});
});
export default apiRoute;
export const config = {
api: {
bodyParser: false,
},
};

Answer 2

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

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

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。

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