Невозможно опубликовать изображения через axios в веб-приложении MERN stack

#node.js #reactjs #mongodb #axios #mern

Вопрос:

Я создал конечную точку api, которая получает данные, включая массив изображений. Когда я проверил api с postman, он работает идеально, затем я попытался интегрировать его с интерфейсом, разработанным в reactjs, с помощью axios. Но все остальные данные достигают конечной точки идеально, а не изображений и массивов.изображения, а также массивы отображаются пустыми в конечной точке.Как мне это исправить?

это api

 router.post("/:categoryId", uploadImges.array('image',10), async(req, res) => {
let cId= await Category.findOne({_id:req.params.categoryId});
console.log(cId.categoryName)
console.log(req.body)
// console.log(uploadImgs)
files=req.files;
if(!files)
{
    res.status(500).send("no file selected")
    console.log("no file selected")
}
else
{    
    let imgArray=[];
    files.map((src,index)=>{
                               
                                let img=fs.readFileSync(files[index].path);
                                let imgBase64=img.toString("base64");                             
                                

                                imgArray.push(
                                              {imgPath:files[index].path,
                                               imageBase64:imgBase64,
                                               contentType:files[index].mimetype})
                                               }
                                             )
                                 console.log(imgArray)
    if(cId.categoryName=="Kids wear")
    {
        const KidsWear = new kidswear({
            ...req.body,
            categoryId: req.params.categoryId,
            ProductImage: imgArray,
    
        });
        
        try{
            await KidsWear.save()
            res.status(200).send(KidsWear)
        }
        catch(e){
            res.status(500).send(e.message)
            console.log(e.message)
        }
    }
    else if(cId.categoryName=="Toys")
    {
        const Toys = new toys({
            ...req.body,
            categoryId: req.params.categoryId,
            ProductImage: imgArray,
    
        });
        
        try{
            console.log(Toys)
            await Toys.save()
            res.status(200).send(toys)
        }
        catch(e){
            res.status(500).send(e.message)
            console.log(e.message)
        }
    }
    else if(cId.categoryName=="Mens Wear")
    {
        const MensWear = new menswear({
            ...req.body,
            categoryId: req.params.categoryId,
            ProductImage: imgArray,
    
        });
        
        try{
            await MensWear.save()
            res.status(200).send(MensWear)
        }
        catch(e){
            res.status(500).send(e.message)
            console.log(e.message)
        }
    }
    else if(cId.categoryName=="Ladies wear")
    {
        const LadiesWear = new ladieswear({
            ...req.body,
            categoryId: req.params.categoryId,
            ProductImage: imgArray,
    
        });
        
        try{
            await LadiesWear.save()
            res.status(200).send(LadiesWear)
        }
        catch(e){
            res.status(500).send(e.message)
            console.log(e.message)
        }
    }
    else if(cId.categoryName=="Electronic items")
    {
        const Electronics = new electronics({
            ...req.body,
            categoryId: req.params.categoryId,
            ProductImage: imgArray,
    
        });
        
        try{
            await Electronics.save()
            res.status(200).send(Electronics)
        }
        catch(e){
            res.status(500).send(e.message)
            console.log(e.message)
        }
    }
    
    
}


});
 

внешний интерфейс

 let addProduct=()=>
{
let formData = new FormData();
console.log(selectedfiles)

formData.append('ProductName',productName);
formData.append("ProductPrice", productPrice);
formData.append("ProductDescription", Details);
formData.append("Quantity", qty);
// sizes.map((s)=>{
//   formData.append("productSize", s,s);
// })
formData.append("productSize", sizes);
formData.append('image',selectedfiles);

axios.post(`http://localhost:4000/product/` catid, 
            formData,
            {headers:{'Content-Type': 'multipart/form-data'}}).then(res => 
                                            {
                                                console.log(res.data)
                                                
                                              })
 }