Question

我在下面的代码中遇到了问题。函数loadFile返回一个promise，该promise解析为从输入元素接收到的文件（blob）。此代码有90％的时间正常工作。出现一个文件打开对话框，如果我选择一个图像文件，然后单击“打开”，该图像将被加载并附加到文档主体和消息“ Resolveing promise！”。出现在控制台中。但是，大约有10％的时间我将选择一个图像并单击“打开”，然后什么也不会发生。控制台中未显示任何消息或错误。打开文件对话框只是关闭，尽管选择了图像，oninput处理程序也从未像承诺无法解决那样触发。我怀疑这可能是Chrome中的错误。

function loadFile() {
    return new Promise(resolve => {
        const input = document.createElement("input")
        input.type = "file"
        input.oninput = function() {
            console.log("Resolving promise!")
            resolve(input.files[0])
        }
        input.click()
    })
}

async function imageFromFile() {
    const file = await loadFile()
    const url = URL.createObjectURL(file)
    const image = new Image()
    image.src = url
    await image.decode()
    return image
}

imageFromFile().then(img => {
    document.body.append(img)
})

Answer 1

您可以将异步函数包装在try catch块中（并记录错误），以查看10％的时间会发生什么。

try {
  await loadFile()
} catch(err) {
  console.log(err)
}

为什么oninput有时不触发文件类型输入？

1 个答案: