Question

使用输入和函数粘贴图像时遇到问题。

当我复制图像的地址并使用ctrl-v将其粘贴到输入中时...该URL成功显示。

我的问题是，如果我复制图像而不是地址，则ctrl-v不再起作用，即我的pastedata为空：（

有人知道我怎样才能使它同时工作吗，也就是说，我可以复制同时起作用的图像或地址。

代码

@HostListener('paste', ['$event'])
  onPaste(e: ClipboardEvent) {
    let clipboardData = e.clipboardData || (window as any).clipboardData;
    let pastedData = clipboardData.getData('text');
    alert(pastedData)
}

Answer 1

问题在于粘贴的数据类型不同。链接以文本形式进入，而另一个以文件形式进入。您必须处理不同的情况。您可以检测到不同类型的数据并从那里进行分支。

可能您会将这些项目转换为Blob。幸运的是，对于图像，浏览器可以为您完成工作。有很多示例代码将base64编码的图像转换为Blob，因此您也应该可以。显然，您将不得不使用非base64编码的图像url以及只是偶然的，无关紧要的文本而被用户意外粘贴的情况。

onPaste(e: ClipboardEvent) {
  const clipboardData = e.clipboardData || (window as any).clipboardData;
  const items: DataTransferItem[] = Array.from(clipboardData.items);
  const textData = items.find(x => x.type === 'text/plain');
  const imageData = items.find(x => /image/i.test(x.type) );
 let blob$: Observable<Blob>;
  if (imageData) {
    blob$ = of(imageData.getAsFile());
  }
  else if (textData) {
    // bindCallback throws error when passing textData.getAsString directly
    const callbackFunc = x => textData.getAsString(x);
    blob$ = bindCallback(callbackFunc)().pipe(
      tap(x => console.log(x)),
      map(/** convert to blob **/)
    );
  }
  else {
    blob$ = of(undefined);
  }
  blob$.pipe(/* do stuff with your blob. */).subscribe();
}

使用ctrl-v将图像粘贴到输入文件中

1 个答案: