使用Reactjs渲染图像存储在服务器中

问题描述

我想使用multer渲染存储在Node.js服务器中的图像

router.post('/menu_add',(req,res,next) => {
        upload(req,(err) =>{
            if(err){
                res.render('admin-menu-add',{ error: 'File size large upload,Please make it less than 2 MB' })
            }
            else {
                next()
            }
        }) 
    },async (req,res) => {
            const { name,GST,category} = req.body
            const price = parseInt(req.body.price)
            const gst = parseInt(GST)
            const newMenuItem = new MenuItem({
                name,image: {
                    data: fs.readFileSync(path.join(__dirname + '/uploads/menu/' + req.body.name)),contentType: 'image/png'
                },price,category,GST: gst,GSTamt: gst * price / 100,totalPrice: price + gst * price / 100
            })
        try {
            await newMenuItem.save()
            res.redirect('/menu')
        }
        catch (err) {
            res.render('admin-menu-add',{ error: 'Item Already present' })
        }
    }
)

现在我也尝试使用React服务器访问该图像，该图像在我正在渲染的ejs文件中工作正常，但是我还需要一个在React客户端中访问该图像，以下是服务器端代码为此

router.post('/items',res) => {
    const {category} = req.body
    const cat = await Category.find({name: category})
    const menuItems = await MenuItem.find({category: cat._id})
    res.status(200).send(menuItems)
})

但是在访问图像时是在客户端上

useEffect(() => {
      axios.get('http://localhost:4000/server/categories')
      .then(res => {
        console.log(res.data)
        setCategories(res.data)
      })
    },[])

和JSX中的

(categories.map((cat,ind) => {
                      ***const data = `data:image/${cat.image.contentType};base64,`+ cat.image.data.toString('base64)***
                      console.log(data)
                      return(
                        <div className="col-6 category_Box" key={ind}>
                        <Link to={'/' + cat.name}>
                            <div className="column_Box text-center">
                                <img src={data} alt="" />
                                <p>{cat.name}</p>
                            </div>
                            </Link>
                        </div>
                    )}))

数据变量== HomePage.js：34 data：image / image / png; base64，[object Object] 在JSX中，当它在ejs中工作时无法正常工作，以下代码可以正常工作

<td><img src="data:image/<%= item.image.contentType%>;base64,<%=item.image.data.toString('base64')%>" width="100" height="100">
                                </td>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript reactjs reactjs