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

在我的模板中，我有：

        <textarea @paste.prevent="fileChange" ref="canvas" /></textarea>

在我的控制台上，当触发fileChange事件时（通过粘贴），我会不断得到一个字符串

试试这个

在我的组件中，我使用了这个（Listingn粘贴事件）

在我的前面可以看到所有这样的图像

                    <div class="img-wrapper" v-for="(image, index) in dimg" :key="index">
                        <img style="max-width:230px; max-height: 230px;" thumbnail center rounded  class="max-image-upload" :src="image" :alt="`Image Uplaoder ${index}`">
                    </div>

您不能在元素中显示图像，只允许纯文本。是否有允许我粘贴图像的DOM元素？我尝试了一次，但没有成功。大多数元素都接受图像作为内容，包括

div

。通常，表单控件元素不接受图像（除了

input type='image'

，但这可能是您不想使用的）。但您无法粘贴到静态元素，请尝试使用

div

，该div具有

contenteditable

属性集。控制台上仍会收到字符串类型的项目。浏览器从剪贴板中选择的图像很可能是base64格式，实际上是字符串。请，包括一些关于您认为解决方案可行的原因和/或问题原因的文本解释。谢谢补充。感谢您的反馈：）

                    <b-form-textarea
                            @paste="pasteFunction"                                
                    ></b-form-textarea>            

pasteFunction(pasteEvent, callback){

if(pasteEvent.clipboardData == false){
    if(typeof(callback) == "function"){
        console.log('Undefined ')
        callback(undefined);
    }
};

var items = pasteEvent.clipboardData.items;

if(items == undefined){
    if(typeof(callback) == "function"){
        callback(undefined);
        console.log('Undefined 2')
    }
};
for (var i = 0; i < items.length; i++) {
    
    if (items[i].type.indexOf("image") == -1) continue;
    var blob = items[i].getAsFile();
    this.addImage(blob)
}
}

       addImage(file){
            if (!file.type.match('image.*')) {
                return new Promise((reject) => {
                    const error = {
                        message: 'Solo puede arrastrar imágenes.',
                        response: {
                            status: 200
                        }
                    }
                    this.$obtenerError(error)
                    reject()
                    return;
                })
            }

            this.files.push(file);
            const img = new Image(),
                reader = new FileReader();

            reader.onload = (e) => this.images.push(e.target.result);
            const str = JSON.stringify(file);

            reader.readAsDataURL(file);
           }

                    <div class="img-wrapper" v-for="(image, index) in dimg" :key="index">
                        <img style="max-width:230px; max-height: 230px;" thumbnail center rounded  class="max-image-upload" :src="image" :alt="`Image Uplaoder ${index}`">
                    </div>