【報錯解決】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>

 

 　　實現效果：

　　

 

　　跟預想的差不多，可惜了這個動圖。