从剪贴板上传图片到服务器

Posted 2023-02-22

【中文标题】从剪贴板上传图片到服务器

【英文标题】：upload picture to server from clipboard

【发布时间】：2016-11-05 03:23:40

【问题描述】：

我一直在寻找解决方案，但我找不到任何解决方案。是否有可能将图片从剪贴板上传到服务器上的文件（通过按 ctrl+v）？ 它适用于 Chrome。

使用 php、javascript、jquery 或其他什么？ chrome的一些外部扩展？

非常感谢。

【参考方案1】：

你可以试试：

https://github.com/layerssss/paste.js

或者

关于粘贴事件和剪贴板 API

http://www.w3schools.com/jsref/event_onpaste.asp

https://www.w3.org/TR/clipboard-apis/

How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

在 javascript 中获取图像后，您可以使用 AJAX 将 base64 编码的图像发送到服务器。在服务器端，您可以对其进行解码并写入文件。

注意：如果您在浏览器中复制图像（从其他选项卡或窗口），则此方法有效。从桌面复制图像时它不起作用。

【讨论】：

我很想知道为什么有人在没有评论的情况下对答案投了反对票。

【参考方案2】：

这是来自适用于我的项目的 angular2 typescript 示例。希望它可以帮助某人。其他情况的逻辑也是一样的。

角剪贴板事件.html

<textarea placeholder="Type a message" (paste)="onPaste($event)"></textarea>
<!-- Place to render the image -->
<img #imgRenderer />

angular-clipboard-event.ts

// Reference to the dom element
@ViewChild('imgRenderer') imgRenderer: ElementRef;

onPaste(event: any) 
    const items = (event.clipboardData || event.originalEvent.clipboardData).items;
    let blob = null;

    for (const item of items) 
      if (item.type.indexOf('image') === 0) 
        blob = item.getAsFile();
      
    

    // load image if there is a pasted image
    if (blob !== null) 
      const reader = new FileReader();
      reader.onload = (evt: any) => 
        console.log(evt.target.result); // data url!
        this.imgRenderer.nativeElement.src = evt.target.result;
      ;
      reader.readAsDataURL(blob);
    
  

这是一个实时实现：

https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts

【讨论】：

已经很长时间了，但我也不明白，因为您建议的解决方案有效并且解决了原始问题正在寻找的内容。