javascript - 从剪贴板 Angular 粘贴图片

Question

我正在尝试创建一个功能，让用户可以在页面上粘贴图片，然后我可以将它上传到服务器并显示给用户。

我知道粘贴事件，并尝试从那里实现，但无法从事件的剪贴板访问任何数据，事件的剪贴板字段中的文件或项目数组总是当我按下 ctrl + v 时为空。

代码如下:

    <div (paste)="pastePicture($event)" style="height: 300px; width: 300px; background-color:#ccc;">
</div>

  pastePicture(event: ClipboardEvent) {
console.log(event);  }

https://plnkr.co/edit/QmELBtWJqjAuEwGPiCZh?p=preview

对此有什么想法吗？

Answer 1

您可以使用属性 event.clipboardData 从事件中获取所有数据。例如，要获取文本数据，您可以调用:event.clipboardData.getData('文本')。您还可以找到属性:文件、项目和类型，这将帮助您获得更多内容。