Как правильно хранить ссылки на загруженные файлы, используя multer?

Question

После того, как множественные файлы загружены с использованием multer, он дает мне пути к каждому файлу, такие как:

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

И это доступно в URL, "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,проблема в том, что в URL-адресе страницы, таком как http://localhost:3000/product,, он будет пытаться проверить путь относительно, а затем получить файл из "http://localhost:3000/product/public/uploads/1/store/aa17c810-0178-11ea-adf6-c9fa892f6902.png",, где файл не существует.

Поэтому мой вопрос заключается в том, что я должен ставить «/» для каждого пути к файлу, который возвращает multer, а затем сохранять его в mongodb?

или я должен просто ставить «/» каждый раз, когда использую тег img?

какой самый стандартный предпочтительный способ?

Answer 1

Я бы сохранил весь путь, включая первую косую черту в MongoDB, потому что путь, начинающийся с "/", указывает на то, что он начинается в корне. (В данном случае это корень вашего проекта.)

Кроме того, потенциальное увеличение производительности при использовании этого:

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

Вместо этого:

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

Незначительно, если не существует, но код выглядит чище.

Answer 2

Когда я использовал multer, у меня тоже возникали такие проблемы. Я думаю, что в вашем случае просто сохраните / используйте multer для каждого пути в mongodb