为什么在尝试使用readAsDataURL时会遇到报错问题？-HCRM博客

1、错误原因：

参数类型错误：FileReader.readAsDataURL()方法要求传入的参数是Blob或File对象，而不是其他类型的数据，如果传入的参数不是Blob或File对象，就会引发TypeError。

（图片来源网络，侵权删除）

文件读取中的问题：在文件读取过程中，如果FileReader对象正在忙于读取其他Blobs，再次调用readAsDataURL()方法会引发错误，这是因为一个FileReader实例不能同时处理多个读取任务。

大文件处理问题：当处理大文件时，readAsDataURL()可能会失败，生成的文件大小只有KB级，而且内容也对不上，这可能是由于内存不足或者后端限制导致的。

2、解决方案：

确保参数类型正确：在调用readAsDataURL()方法之前，确保传入的参数是Blob或File对象，在使用elupload组件时，应该使用file.raw而不是file。

避免并发读取：确保在调用readAsDataURL()方法时，FileReader对象不在忙于读取其他Blobs，可以在读取完成后再进行下一次读取。

处理大文件：对于大文件，可以考虑使用window.URL.createObjectURL()方法代替readAsDataURL()。createObjectURL()方法可以获取当前文件的一个内存URL，类似一个指针，将该url绑定到文件内容上，随需读取。

（图片来源网络，侵权删除）

3、代码示例：

正确的读取方式：

     var reader = new FileReader();
     reader.onload = function(e) {
         console.log(e.target.result);
     };
     reader.readAsDataURL(file);

处理大文件的方式：

     var xhr = new XMLHttpRequest();
     xhr.open("GET", "http://localhost:8080/test/aaa/test", true);
     xhr.responseType = "blob";
     xhr.onload = function() {
         var blob = xhr.response;
         var reader = new FileReader();
         reader.readAsDataURL(blob);
         reader.onload = function(e) {
             console.log(e.target.result);
         };
     };
     xhr.send(null);

4、FAQs：

Q1:readAsDataURL()方法的参数必须是Blob或File对象吗？

A1: 是的，readAsDataURL()方法的参数必须是Blob或File对象，如果传入的参数不是这两种类型，就会引发TypeError。