Как загрузить файл с сервера в react?

ProgramBox

Как загрузить файл с сервера в react?

Post author:admin
Запись опубликована:5 марта, 2023
Post category:Вопросы по программированию

#node.js #reactjs

Вопрос:

У меня есть Node.js серверная часть, которая отправляет изображение значка интерфейсу React. Изначально я кодирую это изображение как строку Base64 и сохраняю его непосредственно в базе данных. Я создал API, который возвращает эту строку во внешний интерфейс. Однако я прочитал, что хранить его в базе данных плохо, поэтому я переписал api для хранения этой строки на сервере в виде файла json, и теперь мой api возвращает абсолютный путь к этому файлу json. Однако, как интерфейс React должен извлекать файл? Можно ли использовать абсолютный путь или мне нужно создать другой api для возврата файлового объекта? Если да, то как мне это сделать?

Я новичок как в react, так и в node.js так что любая помощь будет оценена по достоинству.Спасибо.

РЕДАКТИРОВАТЬ: я сохранил путь к файлу как __dirname того, где находится мой код filename .Я получаю ошибку cors при доступе к этому URL

1. Вы можете fetch() использовать любой общедоступный URL-адрес, если вы сохранили файл где-нибудь, где сервер его обслуживает, вы можете fetch()

2. Я не уверен, что означает общедоступный URL? Я просто сохранил путь как имя каталога имя файла?

3. является ли каталог общедоступным?

4. Мои внутренние файлы загружаются в Plesk …. не уверен, означает ли это, что он доступен публично.

Ответ №1:

Используйте Express, чтобы поделиться этой папкой как такой-то.

Предположим, вы храните свои файлы в папке с именем files , недалеко от корня. И предположим, что структура вашего сервера выглядит примерно так:

 - backend
   - app.js
- frontend
   - Components
   - Routes
- public
   - dev
      - index.html  (your template file)
   - files
       - myimage.png

В вашем корневом файле js (app.js ? server.js ? index.js ?):

 const app = express()
app.use('/static', express.static('public'));
app.use('/files', express.static('public/files'));

Затем в коде интерфейса:

 <img src='/files/myimage.png' />

Кстати, нет никаких проблем с сохранением изображений как base64 в вашей базе данных… но каждая резервная копия базы данных также будет создавать резервные копии этих изображений. Если у вас небольшая база данных, не беспокойтесь. Однако, если у вас МНОГО изображений, особенно очень больших изображений, это сделает вашу базу данных (и резервные копии) излишне большими и громоздкими.

Все зависит от вашего варианта использования.

1. Должен ли я хранить папку files в общей папке? Не уверен, что означает эта строка …app.use(‘/ static’, express.static(‘public’));

2. Блин, извини… Я не указал files папку в дереве папок / карте. Ответ отредактирован. Но да, именно там вы будете хранить нужные файлы изображений. Обратите внимание, что приведенная выше древовидная структура является лишь примером — я хотел, чтобы концепция была понятной, поэтому я создал отдельную папку для файлов.

3. Я протестировал его локально, и он работает, если я вызываю его с помощью localhost:3000 {имя папки} / {имя файла}. Однако я попробовал это, используя URL-адрес приложения, и он возвращает ошибку 403?

4.403 означает «не разрешено» (ошибка разрешений). Есть ли система входа в систему? Вы авторизованы? Является ли это междоменным? (То есть вы пытаетесь запустить код в другом домене или поддомене? Google: CORS) Является ли конечная точка веб-api? Это ваш ключ авторизации — проверьте на наличие опечаток. Сервер сообщает вам, что вы не авторизованы для доступа. Я только что заметил ваш комментарий о том, что вы используете Plesk. Звучит как проблема с входом в систему. Прочтите о сеансах реагирования, создании системы входа в систему. Отметьте этот вопрос завершенным и, если необходимо, задайте новый вопрос (у вас будут десятки людей, читающих новый вопрос, а не только я).

5. Оказывается, у меня была проблема с путем к файлу, так как локальный путь к файлу указывается с помощью прямой косой черты \, а сервер использует обратную косую черту //