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

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

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

const storage = multer.diskStorage({
    destination: (req,file,callBack) => {
        callBack(null,'artImages/paintings')
    },filename: (req,`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 发出 get 请求，该请求提供数据和文件路径。现在我想将存储在服务器上的数据以及它们各自的图像发送回 Angular。我写了这个：

router.get('/',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 客户端上显示图像？已经坚持了好几天了。

解决方法

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

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

查看 HttpClient get request 的重载

调用类似于：

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