Javascript 为什么我的getAsFile()方法返回空

下面是我的代码:

document.getElementById("Image_Panel").addEventListener('paste', (event) => { 
console.log("Pasting an image step 1");
const clipboardData = event.clipboardData; // Check if the clipboard data contains an image 
        console.log("Pasting an image step 2");
        console.log("Clipboard: " + clipboardData.items[0]);
     //This return [object DataTransferItem]
        const imageFile = clipboardData.items[0].getAsFile(); 
        console.log("imageFile: " + imageFile);
 //This return null why? I'm sure I copied an image in the clipboard
if (imageFile) {
const blob = new Blob([imageFile], { type: imageFile.type });
 }
const reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onload = () => {
const image = document.createElement('img'); 
image.src = reader.result; // Append the img element to the document body 
console.log("Pasting an image step 3");
document.body.appendChild(image); 
}
});

正如我在console.log中看到的，getAsFile()方法返回null，但我的剪贴板中有一个图像文件，我敢肯定，我如何解决这个问题，让我可以在我的html中粘贴图像？

我试着用鼠标二次点击并在上下文菜单中 Select 复制来复制一个图像，然后我用鼠标二次点击并点击同一菜单中的粘贴.我也试着用Ctrl+v，我总是在JavaScript中使用getAsFile()方法得到空表单，有人能帮我吗？即使是ChatGPT和双子座AI也帮不了我，他们只是认为我的剪贴板是空的.我期待着看到一个形象出现在我的身体里.