Question

我正在尝试在AngularJS中选择文件后进行图像预览

我的HTML用于选择文件并使用ng repeat

显示它

 <input type="file" file-input="files" multiple />
 <li ng-repeat="file in files">[[file.name]] <img data-ng-src="[[todata(file)]]"></li>

和我的角度代码

app.directive('fileInput', ['$parse', function($parse){
               return {
                   restrict:'A',
                   link:function(scope,elm,attrs){
                       elm.bind('change', function(){


                           $parse(attrs.fileInput)
                           .assign(scope,elm[0].files)
                           scope.$apply()

                       })
                   }
               }

           }])
.controller('fileUploader', ['$scope', '$http', 
                      function ($scope, $http) {

                          $scope.todata = function(file) {
                             var oFReader = new FileReader();
                           oFReader.readAsDataURL(file);

                           oFReader.onload = function(oFREvent) {
                               return oFREvent.target.result
                           }; 
                          }
                }]);

它显示图像名称而不是图像本身，todata函数在控制台记录base64转换后的图像，但在HTML中它没有显示任何内容..

如何显示图像以供预览？

修改

console.log(oFREvent.target.result);工作正常，但它是唯一有效的

Answer 1

您的data-ng-src应该以{{1}}为前缀您可以找到更好的说明here

使用data-ng-src显示base64图像

1 个答案: