为什么在我的route.post中没有定义req.file

Question

我正试图将照片从react发送到节点服务器。

但我有一些问题：req.file是未定义的，我不明白为什么

这是我的反应码

const formData: any = new FormData();
formData.append("file", {
uri: image.uri,
type: image.type,
name: "tmpImage",
});
try {    
await axios.post(`${BACKEND_URL}/recipes/photo`, {
formData,
header: { "Content-Type": "multipart/form-data" },
});
} catch (error) {
console.error("Error when sending image");
}

这是我的nodejs代码

multer conf:

export const storage = multer.diskStorage({
destination: function (req, file, callback) {
console.log("here dest");
callback(null, "uploads");
},
filename: function (req, file, callback) {
console.log("here filename");
callback(null, file.originalname);
},
});
export const upload: any = multer({ storage });

路线：

recipesRoutes.post(
"/photo",
upload.single("tmpImage"),
async (req: Request, res: Response) => {
console.log("req files =>", req.files);
console.log("req file =>", req.file);
return res.status(200).send();
}
);

express conf:

app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

req.file是未定义的，我不明白为什么。

感谢的帮助

Answer 1

我认为您需要对发送的数据使用不同的花括号以及您配置的标头。它一定是这样的：

await axios.post(`${BACKEND_URL}/recipes/photo`,
{formData},
{header: { "Content-Type": "multipart/form-data" }},
);

基于这个例子：

import axios from 'axios';
axios.post('https://httpbin.org/post', {x: 1}, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(({data}) => console.log(data));

在这个页面上

GitHub