我使用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
中,我得到的结论如下:
我做错了吗?我该怎么做?
答案 0 :(得分:0)
尝试回复文件的位置并将其输入到img标签中
<img ng-show="data['imgUrl']" ng-src="{{data['imgUrl']}}">
编辑:
搜索StackOverflow回来时遇到了类似的问题:
Sending an image to the server after displaying it in the UI in Angular。
希望它有所帮助。
编辑2:
基于对评论要求的更好理解,我的建议是在控制器中使用带有<img ng-src="data:image/png;base64,{{logo}}" />
的图片代码$scope.image = data
。
这需要返回base64编码的图像文件。哪个将在var base64image = new Buffer(imageFile).toString('base64')
的节点中完成。我在这里使用节点基于node.js的标签,但任何语言都应该能够进行base64编码。