vue中textarea监听粘贴事件获取图片

最新推荐文章于 2024-04-26 15:29:32 发布

iCodingShow

最新推荐文章于 2024-04-26 15:29:32 发布

阅读量1.6k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44949840/article/details/120979836

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

html中代码：

<el-input
    id="textarea"
    v-model="value"
    type="textarea"
    maxlength="1000"
>
</el-input>

JavaScript中代码：

mounted() {
    let that = this;
    const element = document.getElementById('textarea');
    element.addEventListener('paste', function (event) { // addEventListener：添加粘贴事件监听
        const imagesFile = event.clipboardData.files[0];// 获取剪贴板图片
        if (!imagesFile) {
            return;
        }
        const formData = new FormData();
        formData.append('file', imagesFile);
        // 将图片的文件流上传到服务器
        uploadToServiceImage(formData).then(res => {
        	// 返回的是一个图片的远端地址
            that.imageUrl = res.data.url;
        });
    });
}