Express JS 用接收到的图像渲染视图答案

【问题标题】：Express JS render view with received imageExpress JS 用接收到的图像渲染视图
【发布时间】：2018-05-20 13:01:54
【问题描述】：

我正在使用两个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
        });
    });
});

此时我想用客户document 渲染customer/show（EJS 视图引擎），但我不想将此文档保存在我的应用程序文件中，因为document 只需要在视图中显示（客户详细信息和文档存储在另一个应用程序中）。

我试图在我的应用程序结构中创建temporary目录，但是很难管理删除那些不需要的文件（应用程序有很多users，同时可以显示很多customers）。

我尝试实施的另一个解决方案是在客户端发出Ajax 请求，然后将收到的文档附加到<object data='document'>。但是这个请求必须通过user 和password 进行身份验证，所以我意识到在客户端javascript 上存储凭据并不是最好的主意...

我不确定是否可以render 并显示图像而不保存在应用程序文件中？

如果能提供任何帮助，我将不胜感激，也许最好的解决方法是以某种方式管理 temporarily 保存的文档。

【问题讨论】：

标签： javascript html api express httprequest

【解决方案1】：

为什么不在 EJS 模板中创建一个 File 对象，然后将其用于 <img> 上的 src 属性？您已经从图像 API 服务器获取原始缓冲区/blob。将其存储在模板中。

【讨论】：

【解决方案2】：

来自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;

【讨论】：

我有一些语法错误。我正在尝试在 EJS 文件中构造 aBlob 对象，如下所示：<script> var aBlob = new Blob("<%-customer_document%>"); </script> 其中customer_document 是从 API 接收的字符串。我收到“未捕获的语法错误：无效或意外的令牌”错误
去掉周围的引号。
将字符串转换为缓冲区 new Buffer()
var buffer = new Buffer(<%-student_document%>); 这种语法或带引号也会出错。您有以前项目中经过测试的代码示例吗？
你的<%- student_document %> ..是图片文件吗？

【解决方案3】：

最终解决方案（已测试），使用axios 发出API 请求：

在我的路由中，我将向我的 API 发出 HTTP 请求以检索 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>

【讨论】：