用angularjs预览图像

Question

我是angularjs的新手。我正在上载文件。当我在html中使用输入标签时，无法使用onChange属性。因此，我使用ng-change，而不是通过传递事件，而是通过ng-model将文件传递给控制器​​。

HTML:
<input type="file" id="files" ngf-select ng-model="files" ng-change="uploadFile()">

<img ng-src="image_source" alt="preview-image">

我通过的文件是这样的：

name: "slide5.jpg"
lastModified: 1580962915393
lastModifiedDate: Thu Feb 06 2020 09:51:55 GMT+0530 (India Standard Time) {}
webkitRelativePath: ""
size: 141266
type: "image/jpeg"
__proto__: File

和控制器方法：

function uploadFile() {
    var input = $scope.files;

    var reader = new FileReader();

    reader.onload = function(event) {
    $scope.image_source = event.target.result
    }
  }

而且我也尝试过这个

function uploadFile() {

    var input = $scope.files;

    var reader = new FileReader();

    reader.readAsDataURL(input);

    reader.onload = function() {
    $scope.image_source = reader.result;
}

甚至都没有进入阅读器的onload方法。我想检索图像的src，以便可以在上传之前显示它。我也不知道为什么onchange无法正常工作以及为什么我无法通过活动。请帮助。

Answer 1

检查此存储库，您将找到有关文件上传的一些有用信息。https://github.com/shystruk/file-upload-component