javascript - readAsDataURL 不是一个 blob，但图像显示

Question

我有一个文件输入，然后在添加后预览图像。图像显示，但我得到:未捕获类型错误:无法在“FileReader”上执行“readAsDataURL”:参数 1 不是“Blob”类型。”

是什么原因造成的，它们肯定不会显示出来吗？

$('#image-upload-input').on('change', function() {
    var files = document.getElementById('image-upload-input').files;

    for (var key in files) {
        if (files[key]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('.image-upload-container').append('<img src="'+ e.target.result +'" style="width: 100px;">');
            }

            reader.readAsDataURL(files[key]);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="image-upload-input" type="file" multiple>

<div class="image-upload-container"></div>

Answer 1

您滥用了 for( in ) 循环。当它迭代时，它会因 length 属性而阻塞 - 这不是 Blob 对象。发生这种情况是因为 for( in ) 迭代所有(可枚举)对象属性，而不仅仅是“自己的属性”。 Reference

你有两个选择:

• 坚持传统(并且始终有效)for() 循环
• 使用for( of )循环

for( of ) 循环只会迭代“自己的属性”，而传统的 for() 循环将始终在长度属性可用时始终有效。

$('#image-upload-input').on('change', function() {
    var files = document.getElementById('image-upload-input').files;

    for(file of files) {
        if (file) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('.image-upload-container').append('<img src="'+ e.target.result +'" style="width: 100px;">');
            }

            reader.readAsDataURL(file);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="image-upload-input" type="file" multiple>

<div class="image-upload-container"></div>