Javascript 如何向客户端显示上载的图像?

Javascript 如何向客户端显示上载的图像?,javascript,angularjs,node.js,upload,angular-file-upload,Javascript,Angularjs,Node.js,Upload,Angular File Upload,我正在使用AngularJS将图像上传到我的NodeJS服务器。但我不知道如何将图像显示回用户。上传工作正常,我可以在服务器上看到图像,但是如何将其返回到客户端显示呢 HTML: JS:使用库 在“成功中的数据”中,我得到如下信息: 我做错什么了吗?我该怎么做呢?试着将文件的位置交还给img标记,如 编辑: 搜索StackOverflow返回了一个类似的问题: . 希望能有帮助 编辑2: 基于对注释中要求的更好理解,我的建议是在控制器中使用带有$scope.image=数据的图像标记 这需要

我正在使用AngularJS将图像上传到我的NodeJS服务器。但我不知道如何将图像显示回用户。上传工作正常,我可以在服务器上看到图像,但是如何将其返回到客户端显示呢

HTML:

JS:使用库

在“成功中的数据”中,我得到如下信息:

我做错什么了吗?我该怎么做呢?

试着将文件的位置交还给img标记,如

编辑: 搜索StackOverflow返回了一个类似的问题: . 希望能有帮助

编辑2:

基于对注释中要求的更好理解,我的建议是在控制器中使用带有$scope.image=数据的图像标记


这需要返回base64编码的图像文件。这将在变量为base64image=new BufferimageFile.toString'base64'的节点中完成。我在这里基于node.js的标记使用node,但是任何语言都应该能够进行base64编码。

图像位于服务器的私有部分,而不是公共部分。这是因为这些图像不应该被所有用户看到,而应该被同一组中的一些用户看到。在这种情况下,您的解决方案会起作用吗?如果上传者有权查看文件,它可能会起作用。上传前的预览是你想要的吗?不,我想在上传后取回图片。如果用户重新连接,我会这样做:我必须再次从服务器获取图像。看起来这一切都是由API处理的,因此您可以尝试使用$scope.image=dataIf I'm go:,图像URL看起来像:data:image/png;base64,img/noLogo.png,我什么都没看到=/
<img ng-src="{{logo}}" class="col-sm-3" height="100" width="100">
    <div id="dropzone" ng-file-drop="" ng-file-select="" ng-model="files" class="drop-box col-sm-9" 
        drag-over-class="dragover" ng-multiple="false" allow-dir="false"
        accept=".jpg,.png"><b>Drop</b> image here or <b>click</b> to upload</div>
    <div ng-no-file-drop>File Drag/Drop is not supported for this browser</div>
$scope.upload = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; ++i) {
                var file = files[i];
                $upload.upload({
                    url: "api/uploadLogo",
                    file: file
                }).success(function (data, status, headers, config) {
                    console.log("file " + config.file.name + " uploaded. Response: " + JSON.stringify(data));
                    $scope.logo = data;
                });
            }
        }
    };