如何优雅的让网页支持 拖拽和粘贴图片【vue/html】

下面我用vue做个参考，不用vue的原生写法也类似。

1.创建组件

<template>
	<div @mouseover="handleMouseOver" @mouseleave="handleMouseLeave" @drop="handleDrop" @dragover.prevent tabindex="0">
		<slot></slot>
	</div>
</template>

<script>
	export default {
		name: "upLoadDiv",
		//emits:["change"], // vue3 事件声明
		created() {
			if (document != undefined) {
				//阻止了浏览器默认的文件打开行为
				document.addEventListener('dragover', (event) => {
					event.preventDefault();
				});

				document.addEventListener('drop', (event) => {
					event.preventDefault();
				});
			}
		},
		methods: {
			handleMouseOver() {
				document.addEventListener('paste', this.handlePaste);
			},
			handleMouseLeave() {
				document.removeEventListener('paste', this.handlePaste);
			},
			handlePaste(event) {
				if (event) {
					//console.log(event)
					const clipboardData = event.clipboardData || window.clipboardData;
					const files = clipboardData.files;
					console.log("files", files);
					if (files.length > 0) {
						const file = files[0];
						this.$emit('change', file);
					}
				}
			},
			handleDrop(event) {
				event.preventDefault();
				const files = event.dataTransfer.files;
				if (files.length > 0) {
					const file = files[0];
					this.$emit('change', file);
				}
			}
		}
	}
</script>

2.父组件使用

</template>
	</view>
		<upLoadDiv @change="upLoadChange">
			<view style="min-height: 100px;width:100%;background-color: #CCC;">
				<img mode="aspectFit" :src="UpLoadImgBase64" style="width: 100px;width: 100px;"></img>
			</view>
		</upLoadDiv>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				UpLoadImgBase64: ""
			}
		},
		methods:{
			upLoadChange(file) {
				console.log(file)
				if (file.type.indexOf("image") == -1) return
				// const formData = new FormData();
				// formData.append('image', file);

				const reader = new FileReader();
				reader.onload = (e) => {
					this.UpLoadImgBase64 = e.target.result;
				};
				reader.readAsDataURL(file);
			}
		}
	}
</script>