如何使用户能够粘贴图像从剪贴板使用vue？

<template>
  <div>
    <input type="text" @paste="handlePaste" placeholder="粘贴图像">
    <img :src="imageUrl" v-if="imageUrl">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    handlePaste(event) {
      const clipboardData = event.clipboardData || window.clipboardData;
      const types = clipboardData.types;

      if (types.includes('image/*')) {
        const items = clipboardData.items;
        for (let i = 0; i < items.length; i++) {
          const item = items[i];
          if (item.type.indexOf('image') !== -1) {
            const file = item.getAsFile();
            const reader = new FileReader();
            reader.onload = (e) => {
              this.imageUrl = e.target.result;
            };
            reader.readAsDataURL(file);
            break;
          }
        }
      }
    }
  }
};
</script>