我想用 Multer 上传图像,当我用 postmanden 测试它时,它工作正常,但是当我用 axios 发送请求时,req.file 未定义,但我在 req.body 中得到了我想要的数据,并且在前端收到错误 400 .
multer.ts
import { Request, Response, NextFunction } from "express";
import multer from "multer";
const storage = multer.diskStorage({
destination: "uploads/",
filename: (req, file, cb) => {
const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
cb(null, uniqueSuffix);
},
});
const uploads = multer({
storage: storage,
limits: {
fileSize: 1024 * 1024 * 5,
files: 1,
fieldSize: 1024 * 1024 * 5,
},
fileFilter: (req, file, cb) => {
if (file.mimetype === "image/jpeg" || file.mimetype === "image/png") {
cb(null, true);
} else {
cb(new Error("File type not supported!"));
}
},
});
interface RequestWithUser extends Request {
user?: {
id: number;
email: string;
};
}
export function uploadImage(
req: RequestWithUser,
res: Response,
next: NextFunction
) {
uploads.single("image")(req, res, (err) => {
if (err instanceof multer.MulterError) {
console.error("MulterError =>", err.message);
return res.status(400).json({ message: err.message });
}
if (err) {
console.error("MulterError =>", err.message);
return res.status(400).json({ message: err.message });
}
if (!req.file) {
console.error("Please upload an image");
return res.status(400).json({ message: "Please upload an image" });
}
console.log("req.body MWW =>", req.body);
console.log("req.file MWW =>", req.file);
next();
});
}
router.post(
"/create-image",
authorize,
uploadImage,
createImageController.createImage
);
axios 请求示例
const handleGenerateImage = async (prompt: string, image: string) => {
const formData = new FormData();
for (const [key, value] of Object.entries({ prompt, image })) {
formData.append(key, value as string | Blob);
}
console.log("formData", formData);
try {
const result = await axios.post(
"http://localhost:5000/api/create-image",
formData,
{
responseType: "json",
headers: {
Accept: "multipart/form-data",
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${TOKEN}`,
},
}
);
console.log("result", result);
return result;
} catch (error) {
console.log("error", error);
return;
}
};
错误
日志错误 [AxiosError:请求失败,状态代码 400]**
形成数据日志
**
LOG formData {"_parts": [["提示", "超人"], ["图像", "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FstickerAI- 4f69cda2-177b-4e6a-9b97-2784a47b4c88/ImagePicker/2fcasdf1-30f5-4149-89a1-0304b7b3acfc.jpeg"]]}
我尝试从 req.body 中获取数据并将其分配给 req.file,
我尝试使用 req.files 并尝试将其用作数组,
我尝试删除内容类型,
app.use(bodyParser.urlencoded({ 扩展: false }));试了一下是真是假,
等等
尝试排除内容类型标头,它应该会自动处理(请参阅:将数据传递到 Axios 中的服务):
try {
const result = await axios.post(
"http://localhost:5000/api/create-image",
formData,
{
responseType: "json",
headers: {
Authorization: `Bearer ${TOKEN}`,
},
}
);
console.log("result", result);
return result;
} catch (error) {
console.log("error", error);
return;
}
如果这不起作用,请尝试使用 fetch(也排除内容类型标头):
try {
const result = await fetch(
"http://localhost:5000/api/create-image",
{
method: 'POST',
body: formData,
headers: {
Authorization: `Bearer ${TOKEN}`,
},
}
);
console.log("result", result);
// get json
return await result.json();
} catch (error) {
console.log("error", error);
return;
}