【报错解决】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>

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

　　先记录问题，解决了再来更新。

　　先说报错原因，在博客园和CSDN逛了一圈都没有找到解决方法，拉踩一下CSDN七、八个热门回答抄的都是同一份作业，不多说。

　　我去MDN搜索了出错的方法 readAsDataURL()，MDN上对于这一方法的描述为：

　　大致翻译一下就是：readAsDataURL()这个方法会读取指定的Blob或File文件，读取完后readystate会变成‘DONE’，并且触发loadend事件。同时result属性将会包含一个用于表示文件的URL格式的字符串。

　　再结合一下报错信息，Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

　　那就可以直到了原来Blob是一种文件类型，而不是因为我插入的图片是GGB

　　意思就是说我们传入readAsDataURL()的参数不是Blob类型的（这里插入一下，file对象是特殊的Blob类型）

　　那就看看我们传了什么东西进去

　　其实这里是我按照自己的猜想写的代码，肯定是不规范的，console看看传了什么进去

　　果不其然，undefined。

　　那接下来就看看规范的写法应该是怎么样的，我参照了MDN中的代码，这里贴上原链接 https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

　　我自己的代码：

<script th:inline="javascript">

        var showImg = function (){

            var img = document.querySelector('img');

            const fileReader = new FileReader();

            var imgFile = document.querySelector('input[type=file]').files[0];

            fileReader.addEventListener('load',function (){

                img.src = fileReader.result;

            },false);

            if (imgFile){

                fileReader.readAsDataURL(imgFile);

            }

        }

    </script>

　　实现效果：

　　跟预想的差不多，可惜了这个动图。