首页 > 解决方案 > 更新包含图像的表单 - NodeJS

问题描述

我用 react-native 构建了一个应用程序,后端位于连接到 MongoDB 的 NodeJS 中。

我使用 multer 上传和存储图像。

我使用以下发布请求来添加带有图像的产品,它按预期工作:

router.post(`/`, uploadOptions.single('image'), async (req,res)=>{
    const category = await Category.findById(req.body.category);
    if(!category)
        return res.status(400).send("Invalid category.");
    
    const file = req.file;
    if(!file)
        return res.status(400).send("No image in the request.");
    
    const basePath = `${req.protocol}://${req.get('host')}/public/uploads/`;
    const fileName = req.file.filename;
    let product = new Product({
        name: req.body.name,
        description: req.body.description,
        richDescription: req.body.richDescription,
        image: `${basePath}${fileName}`, 
        brand: req.body.brand,
        price: req.body.price,
        category: req.body.category,
        countInStock: req.body.countInStock,
        rating: req.body.rating,
        numReviews: req.body.numReviews,
        isFeatured: req.body.isFeatured,
    })
    product = await product.save();
    if(!product){
        return res.status(500).send('The product cannot be created.');
    }

    res.send(product);
})

问题是当我尝试 PUT(更新)特定产品时,除非我也更新图像,否则 PUT 请求将失败并出现网络错误 404。这是 PUT 请求:

router.put("/:id", uploadOptions.single("image"), async (req,res)=>{
if(!mongoose.isValidObjectId(req.params.id)){
    return res.status(400).send("Invalid product ID.");
}
const category = await Category.findById(req.body.category);
if(!category)
    return res.status(400).send("Invalid category.");

const product = await Product.findById(req.params.id);
if(!product)
    return res.status(400).send("Invalid product!");

const file = req.file;
let imagePath;

if(file){
    const fileName = req.file.filename;
    const basePath = `${req.protocol}://${req.get('host')}/public/uploads/`;
    imagePath = `${basePath}${fileName}`;
}
else {
    imagePath = product.image;
}

const updatedProduct = await Product.findByIdAndUpdate(req.params.id,{
    name: req.body.name,
    description: req.body.description,
    richDescription: req.body.richDescription,
    image: imagePath,
    brand: req.body.brand,
    price: req.body.price,
    category: req.body.category,
    countInStock: req.body.countInStock,
    rating: req.body.rating,
    numReviews: req.body.numReviews,
    isFeatured: req.body.isFeatured,
},
{
    new: true,
})
if(!updatedProduct){
    return res.status(500).send('The product cannot be updated!');
}
res.status(201).send(updatedProduct);
})

如您所见,我尝试检查是否发送了图像,如果没有,则使用旧图像,但这不起作用。我尝试在 put 请求中添加一些 console.logs,但似乎它甚至没有进入该请求。我使用 axios 发送请求

axios.put(`${baseURL}products/${item.id}/`, formData, config)

之后没有响应并且捕获到错误......

希望我解释的一切都足够好,感谢您的帮助。

标签: node.jsreact-nativeaxiosmulter

解决方案


我认为路线有问题,你应该改变

router.put(":/id"

至 :

router.put("/:id"

推荐阅读