【报错解决】Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

项目开发日记-bug多多篇(2)

同时也是 实现一些功能（3）

　　真的痛苦，写一天代码遇到的bug够我写三天博客。

　　今天是为了做一个头像功能，具体说是用户上传头像文件并且预览的功能。

　

<div class="col-lg-3" style="border-right-color: #0f0f0f">
            <img src="" class="img-circle" id="img">
            <input type="file" name="img" id="exampleInputFile" onchange="showImg()" accept="image/gif, image/jpg, image/png">
        </div>

HTML

 

 1 <script th:inline="javascript">
 2         const exampleInputFile = document.getElementById("exampleInputFile");
 3         const img = document.getElementById("img")
 4         const fileReader = new FileReader();
 5         var imgFile = document.getElementById("exampleInputFile").file;
 6         var showImg = function (){
 7             fileReader.readAsDataURL(imgFile);
 8             console.log(fileReader.result);
 9             fileReader.onload = function (){
10                 img.innerHTML=fileReader.result;
11                 console.log(img.getAttribute("src"));
12             }
13         }
14     </script>

JS

　　在页面用户提交了头像文件后console报错Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.