Cordova环境下JS从Dropbox下载文件后FileReader读取失败问题

你在Cordova里用Dropbox JS SDK下载文件时遇到的这两个问题，我帮你拆解下原因和解决办法：

问题1：函数内部FileReader抛出TypeError: reader.addEventListener is not a function #

这个报错看起来有点奇怪，毕竟new FileReader()本该返回标准的FileReader实例，但在Cordova的WebView环境里，偶尔会出现API兼容偏差。大概率是两种情况：

• 你的Cordova WebView版本偏旧，对FileReader的事件绑定方式支持有问题
• 函数内部作用域导致reader变量被意外覆盖或未正确初始化

修复方案 #

换一种事件绑定方式，直接给FileReader的onloadend属性赋值，避开addEventListener的兼容问题：

function downloadFile() {
  dbx.filesDownload({path: '/_bk_test/test3.json'})
    .then(function(response) {
      var blob = response.fileBlob;
      var reader = new FileReader();
      // 替换addEventListener为直接赋值onloadend
      reader.onloadend = function() {
        console.log(reader.result); 
      };
      reader.readAsText(blob);
    })
    .catch(function(error) {
      console.error(error);
    });
}

另外，建议检查下你的Cordova项目是否安装了cordova-plugin-file插件，它能增强WebView对文件系统API的支持，大概率能解决这类兼容问题：

cordova plugin add cordova-plugin-file

问题2：全局存储Blob后FileReader无法读取内容 #

把response.fileBlob存为全局变量后不再报错，但读不出内容，核心原因大概率是Cordova环境下Blob的生命周期问题：

• 异步操作完成后，局部作用域的Blob被正确创建，但全局变量引用的Blob可能被WebView的内存管理机制提前释放
• Dropbox SDK返回的fileBlob可能是自定义的Blob实现，而非标准浏览器Blob，全局存储后丢失了内部关键属性

修复方案 #

1. 先验证Blob有效性：拿到response.fileBlob时先打印基础信息，确认是标准Blob：

console.log('Blob类型:', blob.type);
console.log('Blob大小:', blob.size);

如果输出正常，说明Blob有效，建议直接在回调内完成读取操作，把读取后的内容存为全局变量而非Blob本身：

function downloadFile() {
  dbx.filesDownload({path: '/_bk_test/test3.json'})
    .then(function(response) {
      var blob = response.fileBlob;
      console.log('Blob信息:', blob.type, blob.size);
      var reader = new FileReader();
      reader.onloadend = function() {
        console.log('文件内容:', reader.result);
        // 直接存储读取后的内容到全局
        window.fileContent = reader.result;
      };
      reader.readAsText(blob);
    })
    .catch(function(error) {
      console.error(error);
    });
}

2. 如果Blob本身存在兼容性问题，试试用Dropbox SDK获取临时下载链接，再通过fetch获取标准Blob：

function downloadFile() {
  dbx.filesGetTemporaryLink({path: '/_bk_test/test3.json'})
    .then(function(linkResponse) {
      return fetch(linkResponse.link);
    })
    .then(function(fetchResponse) {
      return fetchResponse.blob();
    })
    .then(function(blob) {
      var reader = new FileReader();
      reader.onloadend = function() {
        console.log('文件内容:', reader.result);
      };
      reader.readAsText(blob);
    })
    .catch(function(error) {
      console.error(error);
    });
}

额外提示 #

因为是Cordova环境，测试时一定要在真实设备或模拟器上运行，不要用普通浏览器测试——Cordova的WebView和浏览器的API支持差异很大，很多问题在浏览器里不会复现。

内容的提问来源于stack exchange，提问作者arjun