在 Angular 10 上显示图像，其中图像是在 Node.js 服务器上使用 Multer 上传的

Question

我正在为我的 web 应用程序使用 MEAN 堆栈。 我正在使用 Multer 将图像存储在 Node.js 服务器上的 artImages 文件夹中。 这是使用 Multer 上传图像并将图像路径与其他数据一起存储在 MongoDB 中的 post 请求。

const storage = multer.diskStorage({
    destination: (req, file, callBack) => {
        callBack(null, 'artImages/paintings')
    },
    filename: (req, file, callBack) => {
        callBack(null, `painting&${Date.now()}&${file.originalname}`)
    }
})

var upload = multer({ storage: storage })

router.post('/', upload.array('artFileLocations'), function(req, res) {
    var paintingFileDesitnations;
    const files = req.files
    if(!files) {
        res.sendStatus(500)
    } else {
        (new Paintings({ 'paintingName': req.body.artName, 'paintingFileLocations': req.files })).save()
        .then((info) => res.send(info))
        .catch((error) => console.log(error));
    }
});

现在我正在向 MongoDB 发出获取请求，它提供数据和文件路径。 现在我想将存储在服务器上的数据及其各自的图像发送回 Angular。 我为此写了这个：

router.get('/', function(req, res) {
    Paintings.find({})
        .then(paintings => { 
             imagePath = path.resolve(<path>, paintings[0].paintingFileLocations[0].path)
             fs.readFile(imagePath, 'utf8', function (err, data) {
               if (err) {
                   console.log(err);
               }
               console.log('Data: ', data);
               res.send(data);
            });
        })
        .catch(error => console.log(error))
});

在这里，请求永远不会控制台错误，我做了控制台数据，这显然是很多乱码。

在 Angular 客户端上，这是状态为 200 但响应为 HttpErrorResponse 的响应。 我不明白发生了什么。

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8080/api/paintings/getAll", ok: false, …}
  error: {error: SyntaxError: Unexpected token � in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: "�PNG
↵↵
  IHDR??���7sRGB���8…�$�I'O$vr�:�b�*FR�B@!0(�b&�x'6��IEND�B`�"}
  headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
  message: "Http failure during parsing for http://localhost:8080/api/paintings/getAll"
  name: "HttpErrorResponse"
  ok: false
  status: 200
  statusText: "OK"
  url: "http://localhost:8080/api/paintings/getAll"
__proto__: HttpResponseBase

有人可以帮助理解和解决这个问题吗？ 并告诉我如何在 Angular 客户端上显示图像？ 已经坚持了好几天了。

Answer 1

如果你使用 Angular 的HttpClient ，默认的responseType是json - 你可能想要选择blob

responseType?: "arraybuffer" | "blob" | "text" | "json"

查看HttpClient 获取请求的重载

调用将类似于：

return this.httpClient.get(url, {responseType:'blob'});