javascript - 访问 File 对象的某些列出的属性时返回 "undefined"

Question

我似乎无法访问我的对象的宽度或高度键。

我正在使用 dropzone.js，它有一个 addedFile 事件，它返回文件和第一个参数。

所以:

var myDropzone = new Dropzone('#dropzone', {url: '/'});

myDropzone.on('addedFile', function(file) {
    console.log(file);
});

回调工作正常，在我的控制台中我看到:

如您所见，显然可以使用高度和宽度键。

myDropzone.on('addedFile', function(file) {
    console.log(file.name); // returns the whole strong
    console.log(file.width); // returns undefined
    console.log(file['width']);  // returns undefined
});

截图如下:

我的问题是，为什么名称可用，但宽度或高度不可用？是因为它们是只读的还是什么？如果是这样，是否有可能访问它？

Answer 1

File.width 属性是 DropzoneJS 扩展，不是核心的一部分 File API ;它是稍后添加的。

Dropzone adds data to the file object you can use when events fire. You can access file.width and file.height if it's an image..

如果适用 "thumbnail" 事件发生时，图像大小信息可用。 不保证在此事件之前设置。

文档对此不是很清楚，只是暗示“缩略图生成时”，但这就是 behavior of the source (请参阅 createThumbnail/resize 函数)- 在生成缩略图时 收集图像大小。

---

可以看到初始行为是因为 console.log(在浏览器中，例如 Chrome，将其视为类似于 console.dir)显示“实时”对象。这反过来又为异步 缩略图生成和关联的图像尺寸收集提供了足够的时间，以便在浏览器在控制台中显示对象现在分配的属性之前完成。 (这也解释了为什么使用超时来读取属性值有效 - 尽管这不是可靠的方法。)

另一方面，直接访问 file.width 会强制立即评估 still-not-set 属性，这会导致 中的 undefined” addedFile" 回调。