我在函数
fetch
中执行多个saveProduct
请求,一个请求将文件上传到/public/images
目录,另一个是将与产品相关的数据上传到product
表,第一个请求 POST /api/upload
工作正常,它确实将文件上传到预期目录,但之后该函数停止工作,它不执行请求POST /api/new-product
,也不执行任何其余代码,toast
不显示..等,在 network
选项卡中,我注意到请求状态为 pending
,并且它只是永远处于待处理状态,在执行多个 fetch
请求之前,代码工作没有问题。
正面
const saveProduct = async () => {
let formData = new FormData();
formData.append("image", product.image);
setSubmitted(true);
if (!product.image || !product.name|| !product.price) {
return;
}
let _products = [...products];
let _product = { ...product };
Promise.all([
await fetch("http://localhost:8000/api/upload", {
method: "POST",
body: formData,
}),
await fetch("http://localhost:8000/api/new-product", {
method: "POST",
body: JSON.stringify(product),
headers: { "Content-Type": "application/json" },
}),
]).then(() => {
_products.push(_product);
toast.current.show({
severity: "success",
summary: "Successful",
detail: "Product Created",
life: 5000,
});
setProducts(_products);
setProductDialog(false);
setProduct(emptyProduct);
});
};
服务器端
import multer from "multer";
// Initialize router
const routes = Router({ strict: true });
const storage = multer.diskStorage({
destination: function (req, file, cb) {
return cb(null, "./public/images");
},
filename: function (req, file, cb) {
return cb(null, `${Date.now()}_${file.originalname}`);
},
});
const upload = multer({ storage });
routes.post("/upload", upload.single("image"), (req, res) => {
console.log(req.body);
console.log(req.file);
});
routes.post(
"/new-team-member",
[
// Validation for user name
body("name")
.trim()
.not()
.isEmpty()
.withMessage("product name must not be empty")
.isLength({ min: 10 })
.withMessage("Full name must be at least 10 characters in length")
.escape(),
// Validation for password length
body("price")
.trim()
.not
.isEmpty()
.withMessage("price must not be empty"),
],
// tokenValidation(),
// validate, // Middleware to handle validation errors
(req, res) => {
try {
const { name, price, image } = req.body;
DB.execute(
"INSERT INTO `team` (`name`,`price`,`image`) VALUES (?,?,?)",
[name, price, image]
);
res.status(201).json({
name: name,
price: price,
image: image,
});
} catch (err) {
console.log(err);
}
}
);
发生这种情况是因为您没有在上传 api 中将任何响应从服务器发送回前端,请尝试使用 res.status.().json({}) 发送响应
发生这种情况是因为我对每个
await
都使用fetch
,它应该是await Promise.all([...])
await Promise.all([
fetch("http://localhost:8000/api/upload", {
method: "POST",
body: formData,
}),
fetch("http://localhost:8000/api/new-team-member", {
method: "POST",
body: JSON.stringify(product),
headers: { "Content-Type": "application/json" },
}),
]).then(() => {
...
});