Question

我想以私密方式使用ExpressJS提供图像。我认为静态服务是不可能的。因此，我根据具有有效权限的请求提供服务（请参阅下面的“validateTokens（req）”调用）。但是，当我在AngularJS应用程序中接收它们时，我无法在DOM中显示。

这是我服务器的相关代码：

expressServer.get('/image', function (req, res){
    if (validateTokens(req)) {
        var filePath = path.join(__dirname, "./testImage.jpg");
        res.sendFile(filePath);
    }
});

这是我客户的相关代码：

var app = angular.module("app", []);
app.controller("indexController", function($http, $scope, $window){
    $http({
        method: 'GET',
        url: '/image'
    }).then(function successCallback(response) {
        var blob = new Blob([response.data], {type : 'image/jpeg'});
        $scope.imageData = $window.URL.createObjectURL(blob);
    }, function errorCallback(response) {
    });
});

这是我的DOM模板：

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8">
        <title>Node Testing</title>
        <script src="angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="indexController as indexCtrl">
        <img data-ng-src="{{imageData}}" alt="Image to be shown" />
    </body>
</html>

Answer 1

您现在用于发送图像sendFile的方法仅供下载。

设置所有必要的标题以强制浏览器开始下载。

API Reference for sendFile

您可以做的是在验证后发送base64编码的图像，该图像可以设置为图像的src属性

var fs = require("fs");
fs.readFile("testimage.jpg", function(err, buffer){
    var base64Image = new Buffer(buffer, 'binary').toString('base64');
    res.send('data:image/jpeg;base64,' + base64Image);
});

然后从你的角度js代码

$http({
    method: 'GET',
    url: '/image'
}).then(function successCallback(response) {
    $scope.imageData = response.data;
}, function errorCallback(response) {
});

使用ExpressJS提供图像并使用Angular JS在DOM的img标记中显示它

1 个答案: