FileReader readAsDataURL讀取視頻文件一直預(yù)覽失敗怎么解決？

使用FileReader readAsDataURL讀取本地上傳的視頻文件很多時候預(yù)覽不到如圖圖片描述

猜測是因為視頻大小的問題不知道這里到底是因為什么菜鳥求帶
正常應(yīng)該是圖片描述

代碼如下
var reader = new FileReader();

            reader.onload = (evt) => {
                if (videoType.indexOf(fileType.toLocaleLowerCase()) !== -1) {
                    $('.waitUpload .nullVideo').remove();
                    $('.waitUpload').html(
                        '<div data-filename="' + fileName +
                        '">\
                    <div>\
                        <div class="videoCtn"><video src="' +
                        evt.target.result +
                        '" controls></video></div>\
                    </div>\
                    <div class="videoInfo">\
                        <span class="videoName" title="' +
                        fileName + '">' +
                        fileName + '</span>\
                        <span class="videoSize">' +
                        size +
                        'M</span>\
                    </div>\
                    <div class="btnCtn">\
                        <span class="btn" data-toggle="modal" data-target=".modal">上傳</span>\
                    </div>\
                </div>'
                    );
                    file = _this.files[0];
                    localAddress = evt.target.result;
                } else {
                    alert('請選擇視頻文件');
                }
                $(this).val('');
            };
            reader.readAsDataURL(this.files[0]);

回答

編輯回答

陪我終

FileReader.readAsDataURL 讀取文件之后是 base64 編碼的字符串，這個是不能直接作為 src 使用的，要直接使用還應(yīng)當拼接響應(yīng)的 MIME Type 前綴，比如 data:audio/ogg; 這是 .ogg 格式的前綴，具體是什么前綴取決于你上傳文件的擴展類型了。

其實這里沒必要非使用 FileReader 來完成這個需求，讀一些小的文件還可以，讀大的文件其實不是很好。不如直接使用 URL.createObjectURL() 來創(chuàng)建一個 DOMString，然后直接使用這個 DOMString 即可，不過不要忘記使用完之后通過 URL.revokeObjectURL()方法來釋放。

我之前做過一個很簡單的預(yù)覽器組件，就是通過后者完成的，基本簡單的格式(音頻、視頻、圖片等等)都可以預(yù)覽，不過是基于 Angular 的，鏈接。

2018年5月3日 21:46

編輯回答