Как мне просмотреть изображение с помощью предустановленного URL-адреса S3 в React?

#javascript #node.js #reactjs #amazon-web-services #amazon-s3

#javascript #node.js #reactjs #amazon-веб-сервисы #amazon-s3

Вопрос:

У меня есть предустановленный URL-адрес загрузки AWS с 20-секундным сроком действия:

 https://our-namespace.s3.amazonaws.com/documents/7443912/ffb9bbc5-5f4f-4315-a4e8-418bc31dbef2.png?X-Amz-Security-Token=123amp;X-Amz-Algorithm=AWS4-HMAC-SHA256amp;X-Amz-Date=20211007T004004Zamp;X-Amz-SignedHeaders=hostamp;X-Amz-Expires=20amp;X-Amz-Credential=ASIA4SLAKW7L216GHWOI/20278006/us-east-1%2GF3/aws4_requestamp;X-Amz-Signature=123
 

Когда я загружаю этот URL-адрес в браузере, он запускает загрузку. Я ищу способ отобразить это как предварительный просмотр изображения в браузере — вместо инициализации загрузки файла.

Моей первоначальной мыслью было преобразовать этот URL-адрес в большой двоичный объект, а затем отобразить этот большой двоичный объект в режиме предварительного просмотра изображения. Единственная проблема в том, что я не уверен, как это сделать. Я нашел следующий пакет: https://www.npmjs.com/package/rn-fetch-blob но, похоже, это больше не поддерживается.

Каков был бы оптимальный способ отображения изображения в качестве предварительного просмотра по ссылке только для загрузки AWS?

Комментарии:

1. Установлен ли правильный тип содержимого для базового объекта S3? Что ваш браузер делает для других PDF-файлов?

2. Проблема заключается в заголовках ответов от AWS. AWS отправляет «Content-Type: application / octet-stream», но вам нужен «Content-Type: application / pdf»

3. @jarmod @Unigazer Я случайно использовал неправильный формат URL-адреса для ссылки S3. Я только что обновил его в вопросе — ваши комментарии все еще актуальны? Если да, то как я могу заставить AWS отправлять content-type as application/pdf ? И откуда вы знаете, что оно поступает как application/octet-stream ? Я не уверен, как это просмотреть

4. Да, тип содержимого имеет значение. Это определяет, как загруженный файл будет представлен агенту пользователя. Все SDK и awscli позволяют загрузчику указывать тип содержимого.

5. Все эти разговоры о прокси и решениях для кодирования не должны быть необходимыми. Объекты S3 могут иметь метаданные типа содержимого. Установите это правильно для загруженного PNG и PDF, затем создайте предварительно подписанные URL-адреса для каждого, а затем вызовите эти URL-адреса в своем браузере. Затем ваш браузер может выбрать отображение / предварительный просмотр файла, а не его загрузку. Примечание: если вы загружаете файлы через консоль AWS S3, она обычно назначает правильный тип содержимого, поэтому вам не нужно.

Ответ №1:

Вам нужно установить правильный Content-Type для каждого объекта в S3, например application/pdf , или image/png .

Вы можете сделать это при загрузке объекта или использовать консоль AWS S3 для последующего его изменения. Обратите внимание, что Content-Type это считается метаданными.

Установка правильного Content-Type значения для объекта означает, что когда объект обслуживается S3 или CloudFront, этот тип содержимого будет передан клиенту, что позволит ему принять решение о отображении или загрузке, в зависимости от обстоятельств.

Комментарии:

1. Понял, так что в настоящее время content-type заголовок всегда binary/octet-stream . Просто чтобы убедиться, что я вас правильно понял — если я изменил заголовок на что-то более подходящее, например image/png , тогда я смогу просмотреть это в теге изображения, например <img src="s3-link-with-correct-headers" /> ?

2. Да, несмотря на браузер и другие потенциальные проблемы с кэшированием. Это должно быть просто подтвердить (как предлагалось ранее). Загрузите пару PDF-файлов или PNG-файлов, один с правильным типом содержимого, другой без. Создайте предварительно подписанные URL-адреса для каждого, затем вставьте их в строку URL-адреса вашего браузера (или используйте их в простом HTML-файле в качестве атрибутов img src).