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

对此有何想法？

- dazzed

Answer 1

您可以使用属性event.clipboardData获取事件的所有数据。例如，要获取文本数据，可以调用：event.clipboardData.getData('text')。还可以找到属性：files、items和types，这些属性可以帮助您获取更多内容。

- Maxim Goncharuk

---

从我所做的测试和你可以看到的示例中，我无法访问剪贴板数据中的图片或文件，它只适用于文本。如果您能提供一个证明我错误的示例，那就太好了。 - dazzed

@dazzed 当我复制图像并将其粘贴到您在plunker中的示例中时，我得到了下一个对象： https://gyazo.com/3ac542dd7858ee4a59a39b95d523f9dc - Maxim Goncharuk

这很有趣，因为我总是得到空数组的文件、项目和类型。你是否在最新版本的Chrome上运行？谢谢。 - dazzed

是的，我是。 - Maxim Goncharuk

好的，我看到你暂停了调试器并通过开发工具控制台访问了事件，这实际上对我也起作用了，从控制台访问剪贴板数据，尽管当我在pastePicture事件上访问它时，对象为空，而这正是我需要它有数据的时候。 - dazzed

你尝试过这个吗：$event.clipboardData.files[0]？你可以访问文件对象。 - Yanis-git