AngularJS watch FileReader（）。readyState change

Question

这里是我的代码来读取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不起作用。有什么方法可以观看readyState的变化吗？谢谢你的帮助！

Answer 1

我建议再次在处理函数中设置手表，因为每次触发时它都会添加新的手表。 然后您将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的评论是最好的解决方案使用`$ timeout`你可以尝试设置`scope.readyState = 2`在`读者