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

Question

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

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 get request

的重载

电话会是这样的：

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

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

Display image on Angular 10, where image is uploaded using Multer on Node.js server

node.js

mean-stack

multer

angular