Reactjs MERN堆栈在服务器上保存图像，并在mongoDB中保存路径

我有一个名为front的CreateReact应用程序，可以将一些图像发送到我的express服务器。以下是我的项目结构：

我使用express fileupload模块将React应用程序中的图像发送到服务器，效果良好。现在，我想将图像存储在服务器上的一个文件夹中，并将图像的路径保存在数据库中

是否可以将图像保存到express应用程序中react应用程序的公用文件夹中？考虑到它们位于两个不同的文件夹中

---

或者我应该将图像保存在express应用程序中？在这种情况下，我应该如何在react应用程序中显示图像，以及数据库中保存的路径是什么？

在保存文件之前，您可以在所有路由之前添加以下中间件路由，以便为前端应用程序的URL提供图像服务。考虑到此代码位于具有公用文件夹的同一目录中

app.use('/images', express.static(path.join(__dirname, './public/images')));

管理上载的文件

app.post('/upload', function (req, res) {
      // on frontend the input tag as name 'uploadFile'
      // as -> <input type="file" name="uploadFile" />
      let uploadFile = req.files.uploadFile;

      // e.g. "/images/myImage.jpg"
      // To be served later as http://yourdomain.com/images/myImage.jpg
      const imageUrl = `/images/${uploadFile.name}`;

      // move from temp location to your server's public/images directory
      uploadFile
            .mv(path.join(__dirname, 'public', 'images', uploadFile.name))
            .then(() => {
                  // perform database save operation here and then give appropriate response
                  res.json({ message: 'File uploaded', imageUrl: imageUrl });
            })
            .catch((error) => console.log(error));
});

app.post（'/upload'，函数（req，res）{
//在前端，输入标记名为“uploadFile”
//as->
让uploadFile=req.files.uploadFile；
//例如“/images/myImage.jpg”
//以后作为http://yourdomain.com/images/myImage.jpg
const imageUrl=`/images/${uploadFile.name}`；
//从临时位置移动到服务器的public/images目录
上传文件
.mv（path.join（uu dirname，'public'，'images'，uploadFile.name））
.然后（（）=>{
//在此处执行数据库保存操作，然后给出适当的响应
res.json（{message:'File uploaded'，imageUrl:imageUrl}）；
})
.catch（（错误）=>console.log（错误））；
});

图像将存储在public/images文件夹中

如果这段代码不在包含公用文件夹的同一目录中，则可能需要修改给定给mv（）函数的路径

app.use('/images', express.static(path.join(__dirname, './public/images')));

有关更多信息，请访问