Блог

Главная - Вопросы по программированию - NodeJS: передача изображения, хранящегося на AWS S3, в тег img клиента

NodeJS: передача изображения, хранящегося на AWS S3, в тег img клиента

#node.js #reactjs #express #amazon-s3

#node.js #reactjs #экспресс #amazon-s3

Вопрос:

У меня есть сервер и клиент react, работающие на Heroku. Все файлы хранятся на AWS S3. Поскольку файлы являются частными и необходимо проверить аутентификацию, я планирую получить URL-адрес через сервер и перенаправить URL-адрес клиенту.

Таким образом, на стороне клиента:

 <img style={{maxHeight: '10vh', width:'auto'}} src=`https://localhost:3000/api/files/${usr_id}/${filename}`/>

Обратите внимание, что img — это только один пример, но у меня есть другие типы данных в AWS (например, pdf), для которых он должен работать так же хорошо.

На стороне сервера предполагается, что источник от клиента напрямую возвращает изображение (или другие данные) через подписанный URL-адрес из AWS. У меня есть первая часть, которая извлекает подписанный URL-адрес и работает хорошо. Но не могу понять, как вернуть URL клиенту, чтобы изображение отображалось правильно.

Код на стороне сервера (упрощенный):

   router.get('/:user/:filename', async (req, res) => {
    try {
        const url = s3.getSignedUrl('getObject', {
          Bucket: BUCKET_NAME, 
          Key: filename,
          Expires: 60 * 1,
        })
        console.log(url) // This works well and the image can be viewed in browser when copying the url
        
        // And now... ?
        // How do I return the signed URL to the image in the client?

      }
    } catch (err) {
      res.status(500).json({ message: 'Something went wrong.' });
    }
  });

заранее спасибо,
Алекс

Ответ №1:

<img> теги могут следовать за перенаправлениями, например, чтобы ответить URL-адресом png, вы можете сделать:

 res.redirect(301, "/image.png");

где последний параметр «/image.png» — это новый URL-адрес,

вот рабочий пример, мой server.js:

 let express = require("express");

let app = express();

app.set("view engine", "ejs");
app.use(express.static("assets"));

app.get("/", (req, res) => {
  res.render("home");
});

app.get("/api/files/*", (req, res) => {
  let newURL = "/image.png";
  res.redirect(301, newURL);
});

app.listen(3000);

мой взгляд на home.ejs:

 <h1>Hello World!</h1>

<!-- this path/file doesn't exist -->
<img src="/api/files/hello-world.png" alt="my image" />
Метки: