javascript - 如何解决读取文件时出现的 blob 错误？

Question

我在输入文本框中上传文件时遇到此错误。

未捕获的 DOMException:无法在“FileReader”上执行“readAsDataURL”:该对象已忙于读取 Blob。

我必须上传 html 文件并预览该文件中的文本，但在上传时会在控制台中抛出此错误。如何解决此错误。这是我的 JavaScript 代码--

>  $(".image-preview-input input:file").change(function (){    
>                   var file = this.files[0];
>                   var reader = new FileReader();
>                   var FileExtension = file.name.split('.')[file.name.split('.').length - 1].toLowerCase();
>                   if(FileExtension !== 'html'){
>                     $('#ValidationMessage').css("color", "red");
>                     $('#ValidationMessage').html("Please select the html extension file.");
>                     this.set('template','');  
>                     $('.image-preview-input input:file').val(""); 
>                   }
>                   // Set preview image into the popover data-content
>                   reader.readAsText(file);
>                   reader.onload = function (e) {                      
>                       $('#ValidationMessage').empty();
>                       $(".image-preview-input-title").text("Change");
>                       $(".image-preview-clear").show();
>                       $(".image-preview-filename").val(file.name);                      
>                       self.set('template',e.target.result);
>                   }    
>                   reader.readAsDataURL(file);
>               });

Answer 1

您正在读取文件两次。

首先:

reader.readAsText(file);

然后这里:

reader.readAsDataURL(file);

我看不出第二次阅读的理由。如果您打算使用它，请将其放在您的 onload() 回调中；