1

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

HTML：

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

JS：（角度使用ng-file-upload库）

$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;
                });
            }
        }
    };

在data成功中，我得到了类似的东西： 在此处输入图像描述

难道我做错了什么？我该怎么做？

4

1 回答 1

0

尝试交回文件的位置并将其输入到 img 标签中，例如 <img ng-show="data['imgUrl']" ng-src="{{data['imgUrl']}}">

编辑：搜索 StackOverflow 时返回了一个类似的问题： 在 Angular 的 UI 中显示图像后将图像发送到服务器。希望能帮助到你。

编辑2：

基于对评论要求的更好理解，我的建议是在控制器中使用<img ng-src="data:image/png;base64,{{logo}}" />带有 a的图像标签。$scope.image = data

这需要返回 base64 编码的图像文件。这将在节点中完成var base64image = new Buffer(imageFile).toString('base64')。我在这里根据 node.js 的标签使用节点，但任何语言都应该能够进行 base64 编码。

于 2015-04-17T16:43:03.230 回答