readAsDataURL 不是 blob，但图像显示答案

【问题标题】：readAsDataURL is not a blob, yet the images showreadAsDataURL 不是 blob，但图像显示
【发布时间】：2018-10-20 20:23:25
【问题描述】：

我有一个文件输入，然后在添加后预览图像。图像显示，但我得到： Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type '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>

【问题讨论】：

尝试使用文件阅读器查看您正在阅读的内容。在 for...in 的每次迭代中创建 console.dir(files[key])
这会给你文件对象
您尝试过还是只是假设？
我在发布之前尝试过，以确保 for 循环返回正确的数据。

标签： javascript file blob

【解决方案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>

【讨论】：

【解决方案2】：

几个问题的好例子。

您得到的异常 - 因为文件不是真正的数组，所以for ... in - 迭代“0”、“1”...“item”、“length”键。
如果不隔离作用域，就不能在循环中使用异步函数
我的个人意见：如果可以，请不要使用 jQuery :-)

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

    for (var key=0; key < files.length; key++) {
        (function(){
            var reader = new FileReader();
            var file = files[key];
            reader.onload = function(e) {
                var img = document.createElement('img');
                img.style= "width:100px";
                img.src = reader.result;
                $('.image-upload-container').append($(img));
            }
            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>

【讨论】：

【解决方案3】：

我会放弃使用 URL.createObjectURL 的 FileReader，而只使用常规的 for 循环

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

  for (var i = 0; i < files.length; i++) {
    var url = URL.createObjectURL(files[i]);
    $('.image-upload-container').append('<img src='+ url +' style="width: 100px;">');
  }
});

并且可能在输入中添加了这个额外的属性

accept="image/*"

【讨论】：