Экспресс JS рендеринга с полученным изображением - PullRequest
Новая
       60

Экспресс JS рендеринга с полученным изображением

0 голосов
/ 20 мая 2018

Я работаю с двумя Express JS приложениями, одно из них - API, а второе - приложение, которое использует API, отправляя запросы и отображая полученную информацию для пользователя.

В API маршрутеЯ отправляю изображение как ответ: 

router.get('/:customer_id',authController.isAuthenticated,(req,res) => {
    .
    . Retrieving customer data
    .

    return res.sendFile('/uploads/'+foundCustomer.doc_path);
});

А позже другое приложение получает это document: 

router.get('/:customer_id',(req,res) => {
    var options = {
    url: 'http://'+config.API.user+':'+config.API.password+'@'+config.API.host+':'+config.API.port+'/customers/'+req.params.customer_id
    };

    request(options,(err,response,body)=>{
        return res.render('customer/show',{
            document: ?, // Send document as parameter to view
        });
    });
});

В этом пункте я хочу сделать customer/show (представление EJSс клиентом document, но я не хочу сохранять этот документ в файлах своего приложения, поскольку document требуется только для отображения в поле зрения (сведения о клиенте и документ хранятся в другом приложении).

Я пытался создать каталог temporary в структуре моего приложения, но трудно удалить те ненужные документы (в приложении много users и одновременно может отображаться много customers).

Другое решение, которое я пытался реализовать, - это сделать Ajax запрос на стороне клиента, а затем добавить полученный документ к <object data='document'>.Но этот запрос должен быть аутентифицирован с user и password, поэтому я понял, что хранение учетных данных на стороне клиента - не лучшая идея ...

Я не уверен, что это вообще возможноrender и отображение изображения без сохранения в файлах приложения?

Буду признателен за любую помощь, может быть, лучший обходной путь - каким-то образом управлять temporarily сохраненными документами.

Ответы [ 3 ]

0 голосов
/ 20 мая 2018

С https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob

// place this code (store this variable) inside of your EJS template
// so it can be used by the client-side JS
var aBlob = new Blob( array[, options]); // Where array is the raw buffer data returned from your image API server

См. https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

var objectURL = URL.createObjectURL( aBlob ); // Where object is a Blob object

См. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

const img = document.createElement('img');
img.src = objectURL;
0 голосов
/ 26 мая 2018

Окончательное решение (проверено), используя axios для выполнения API запроса:

На своем маршруте я собираюсь сделать HTTP-запрос к моему API для получения PDF файл (документ): 

axios.get(`http://my-api/customer/id`).then(response => {
   var photo =  new Buffer(response.data, 'binary').toString('base64');

   return res.render('customers/show',{
       document: document
   });
});

В моем представлении ejs я использую тег HTML object для отображения полученного PDF: 

<object data="data:application/pdf;base64,<%-document%>"></object>
0 голосов
/ 20 мая 2018

Почему бы не создать объект File внутри шаблона EJS, а затем использовать его для атрибута src в <img>?Вы уже получаете необработанный буфер / блоб с вашего сервера API изображений.Сохраните его внутри шаблона.

...