使用multer存储上传文件链接的正确方法是什么？

Question

使用multer上传多个文件后，它为我提供了每个文件的路径，例如：

"photo" : [ 
        "public/uploads/1/store/aa17c810-0178-11ea-adf6-c9fa892f6902.png",
...
    ],

这可以通过网址“ http://localhost:3000/public/uploads/1/store/aa17c810-0178-11ea-adf6-c9fa892f6902.png”访问。

但是在React（或者可能是任何前端）中，我不得不在此URL的前面加上斜杠，如下所示（假设imageUrl的值为“ public / uploads / 1 / store / aa17c810-0178-11ea-adf6-c9fa892f6902 .png”：

<div>
       <img src={"/" + imageUrl} />
 </div>

如果我不将“ /”放在前面，则路径称为相对路径。

如果我使用该imageUrl而不在该img src的头部附加“ /”，则问题是在页面网址中，例如http://localhost:3000/product，它将尝试相对检查路径，然后从“ http://localhost:3000/product/public/uploads/1/store/aa17c810-0178-11ea-adf6-c9fa892f6902.png”，该文件不存在。

所以我的问题是，我应该在multer返回的每个文件路径中添加“ /”，然后将其存储到mongodb吗？

还是我每次使用img标记时都应仅输入“ /”？

最标准的首选方式是什么？

Answer 1

当我使用multer时，我也遇到了这类问题。我认为在您的情况下，只需在mongodb的每个路径中存储/使用multer

Answer 2

我将整个路径（包括第一个斜杠）保存在MongoDB中，因为以“ /”开头的路径表示它从根开始。 （在这种情况下，是项目的根。）

此外，使用此功能可能会提高性能：

<div>
    <img src={imageUrl} />
</div>

相反：

<div>
    <img src={ "/" + imageUrl} />
</div>

即使不存在，也可以忽略不计，但是代码看起来有点干净。