AngularJS中使用FileReader获取文件URL返回undefined问题求助

你遇到的问题核心在于FileReader的readAsDataURL是异步操作——它不会立刻返回读取后的URL，而是在文件读取完成后通过事件回调来传递结果，所以你直接把它的返回值赋值给url1自然会得到undefined。

正确的做法是通过FileReader的onload事件来获取读取完成后的DataURL，具体修改代码如下：

element.bind('change', function () {
  var file = element[0].files[0];
  console.log(file);
  
  var reader = new FileReader();
  // 绑定读取完成的回调事件
  reader.onload = function(e) {
    // 读取完成后，通过e.target.result或者reader.result拿到DataURL
    var url1 = e.target.result;
    console.log(url1); // 这里就能正常输出图片的DataURL了
    
    // 如果需要把这个URL绑定到Angular的scope上，记得用$apply触发消化周期
    // 比如：
    // scope.$apply(function() {
    //   scope.imageUrl = url1;
    // });
  };
  
  // 启动文件读取操作
  reader.readAsDataURL(file);
});

简单拆解下关键逻辑：

• 调用readAsDataURL(file)后，浏览器会在后台异步读取文件内容，不会阻塞后续代码执行
• 读取完成时会自动触发onload事件，此时reader.result（或事件对象的target.result）就存储了转换后的图片DataURL
• 如果要把这个URL同步到Angular视图中，必须用$apply包裹赋值操作——因为FileReader的回调不在Angular的自动消化周期内，不手动触发的话视图不会更新

内容的提问来源于stack exchange，提问作者e.k