项目开发日记-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>

 1 

　　在页面用户提交了头像文件后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 

　　我自己的代码：

 　　实现效果：

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