POST 一张图片并以 Node-red 显示在仪表板中

Question

我的目标是在 Python 中通过 POST 请求发送图片，并在 Node Red 的仪表板中显示它，但是一旦它出现，我就卡在了读取图片的步骤中已经送走了。

这是我用来发送文件的代码片段：

directory = os.path.join(DIRECTORY_IMAGES, id)
files = {'image': open(directory,'rb')}
requests.post('http://XXX.XXX.X.XX:1880/IMAGE', files = files)

进入 Node-red 后，我使用的块如下：

消息已收到，但我无法从中取出图片。正如我在其他帖子中读到的那样，msg.payload 设置为 req.files[0].buffer，编码为 Base64 并在模板中使用 <img width="16" height="16" src="files:image;base64,{{msg.payload}}" /> 显示，但不显示图像。

[{"id":"797939a8.a91a58","type":"http response","z":"ddfa6621.2e7168","name":"","statusCode":"","headers":{},"x":1290,"y":2280,"wires":[]},{"id":"d5b145ce.a712f8","type":"ui_template","z":"ddfa6621.2e7168","group":"9beeae56.34305","name":"Display image","order":4,"width":"7","height":"6","format":"<img width=\"16\" height=\"16\" src=\"files:image;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1680,"y":2220,"wires":[[]]},{"id":"5e30e496.958b9c","type":"change","z":"ddfa6621.2e7168","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"req.files[0].buffer","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1300,"y":2220,"wires":[["2f260e60.d12642"]]},{"id":"2f260e60.d12642","type":"base64","z":"ddfa6621.2e7168","name":"Encode","x":1500,"y":2220,"wires":[["d5b145ce.a712f8"]]},{"id":"18c71628.986f4a","type":"http in","z":"ddfa6621.2e7168","name":"","url":"IMAGE","method":"post","upload":true,"swaggerDoc":"","x":1050,"y":2220,"wires":[["5e30e496.958b9c","797939a8.a91a58"]]},{"id":"9beeae56.34305","type":"ui_group","z":"","name":"Última pierna procesada","tab":"223d38a0.9cbaa8","order":8,"disp":true,"width":"7","collapse":false},{"id":"223d38a0.9cbaa8","type":"ui_tab","z":"","name":"CALIDAD PULPAS CINTA 0","icon":"dashboard","disabled":false,"hidden":false}]

我错过了什么？

Answer 1

img src 标签应以 data:image/jpeg;base64, 开头（假设是 JPEG 图片）

您应该将 image/jpeg 换成图像的 mime 类型，例如image/png

[{"id":"9dff2c2e.66ea1","type":"http response","z":"c09a8743.c89388","name":"","statusCode":"","headers":{},"x":390,"y":180,"wires":[]},{"id":"68e0a720.f29498","type":"ui_template","z":"c09a8743.c89388","group":"efcf5006.15dae","name":"Display image","order":4,"width":"7","height":"6","format":"<img width=\"16\" height=\"16\" src=\"data:image/jpeg;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":800,"y":120,"wires":[[]]},{"id":"2fb71bea.a5d1e4","type":"http in","z":"c09a8743.c89388","name":"","url":"IMAGE","method":"post","upload":true,"swaggerDoc":"","x":210,"y":120,"wires":[["9dff2c2e.66ea1","a87b8d6.a9b0c7"]]},{"id":"a87b8d6.a9b0c7","type":"change","z":"c09a8743.c89388","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"req.files[0].buffer","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":420,"y":120,"wires":[["4bcddbb.38c2624"]]},{"id":"4bcddbb.38c2624","type":"base64","z":"c09a8743.c89388","name":"Encode","x":620,"y":120,"wires":[["7d7586e7.205398","68e0a720.f29498"]]},{"id":"7d7586e7.205398","type":"debug","z":"c09a8743.c89388","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":790,"y":60,"wires":[]},{"id":"efcf5006.15dae","type":"ui_group","z":"","name":"Última pierna procesada","tab":"65324def.436554","order":8,"disp":true,"width":"7"},{"id":"65324def.436554","type":"ui_tab","z":"","name":"CALIDAD PULPAS CINTA 0","icon":"dashboard"}]

由以下 python 触发：

import requests

files = {'image': open('/Users/hardillb/temp/photos/DSC_7188.JPG', 'rb')}
requests.post('http://localhost:1880/IMAGE', files = files)

POST 一张图片并以 Node-red 显示在仪表板中

POST an image and display it in dashboard in Node-red

python

node-red