AngularJS watch FileReader().readyState change

AngularJS watch FileReader().readyState change

本文关键字：readyState change watch FileReader AngularJS      更新时间：2023-09-26

这是我在AngularJS中读取本地文件的代码。

var files = document.getElementById("file");
files.addEventListener("change", handleFile, false);
function handleFile(event) {
    SpinnerService.upload(); // Show loading spinner
    var file = event.target.files[0];
    var reader = new FileReader();
    $timeout(function() {
        scope.readyState = reader.readyState;
    });
    reader.onload = function(event) {
        // Read the file
    };
    reader.readAsArrayBuffer(file);
    scope.$watch("readyState", function(newVal) {
        if (newVal == 2) {
            SpinnerService.hide(); // Hide loading spinner
        }
    })
}

读取文件时，reader.readyState将从 0 更改为 1，然后更改为 2。（https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readyState）。

我的代码确实成功读取了该文件。但是，readyState上的$watch不起作用。有什么办法可以观察readyState的变化吗？感谢您的帮助！

我建议再次在处理程序函数中设置手表，因为它每次被触发时都会添加新的手表。然后你把scope.readyState设置为reader.readyState，这是一个实际值，有点像设置 x = 2 并等待它更改为其他内容。

试试这个：

// new empty object
scope.reader = {}
var files = document.getElementById("file");
files.addEventListener("change", handleFile, false);
// set watch on object property
scope.$watch("reader.readyState", function(newVal) {
    if (newVal == 2) {
        SpinnerService.hide(); // Hide loading spinner
    }
})
function handleFile(event) {
     SpinnerService.upload(); // Show loading spinner
     var file = event.target.files[0];
     var reader = new FileReader();
     // set object to reader
     scope.reader = reader;
     reader.onload = function(event) {
         // Read the file
     };
     reader.readAsArrayBuffer(file);
 }

另外，我认为wero的评论是最好的解决方案

相关文章：