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

 

<script th:inline="javascript">
        const exampleInputFile = document.getElementById("exampleInputFile");
        const img = document.getElementById("img")
        const fileReader = new FileReader();
        var imgFile = document.getElementById("exampleInputFile").file;
        var showImg = function (){
            fileReader.readAsDataURL(imgFile);
            console.log(fileReader.result);
            fileReader.onload = function (){
                img.innerHTML=fileReader.result;
                console.log(img.getAttribute("src"));
            }
        }
    </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>

 

 　　实现效果：

　　

 

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