如何使输入接受图像CTRL CTRL v?

Question

我正在Angular的一个项目上工作，需要让一个输入接受我复制和粘贴图像到它，类似于whatsapp web。最简单的方法是什么?我不知道怎么开始LOL。

Answer 1

您需要为此构建一个输入。这是一个Stackblitz播放

这是一个简单的编辑器组件。

import {
Component,
Input,
OnInit,
Output,
EventEmitter,
OnChanges,
ViewChild,
ElementRef
} from '@angular/core';

@Component({
selector: 'editor',
templateUrl: './editor.html',
styleUrls: ['./editor.scss']
})
export class Editor implements OnInit, OnChanges {
@Input() value: any;
@ViewChild('editor') editor: ElementRef;
@Output() valueChange = new EventEmitter();

ngOnInit() {
document.execCommand("styleWithCSS", false, null);
this.editor.nativeElement.innerHTML = this.value;
}
ngOnChanges(changes: any) {
try {
if (this.editor.nativeElement.innerHTML != this.value) {
this.editor.nativeElement.innerHTML = this.value;
}
} catch (err) {
}
}
exec(a, b = null) {
document.execCommand(a, false, b);
};
onInput(newValue) {
this.valueChange.emit(newValue);
}
}

HTML部分

<button (click)="exec('bold')">B</button>
<div contenteditable (input)="onInput($event.target.innerHTML)" class="editor" #editor></div>

它很小。但是contenteditable属性很重要。没有和Angular有什么关系。这是一个标准的HTML属性，它使元素可编辑。

有了这个简单的事情，你可以插入图像，也与CTRL + V或鼠标右键单击。但是这只会在控件中插入一个img元素。所以，如果你从你的电脑复制一个图像，它将无法工作。所以你需要做其他事情。首先将此添加到HTML Element:

(paste)="onPaste($event)"

这里是代码部分

onPaste(e) {
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
let blob = null;
for (const item of items) {
if (item.type.indexOf('image') === 0) {
blob = item.getAsFile();
console.log(blob);
}
}
}

使用这个blob数据你可以做任何你想做的事情。使用FileReader或做你想做的。