使用vue-quill-editor实现图片截图复制粘贴上传

本文主要是介绍使用vue-quill-editor实现图片截图复制粘贴上传,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

需求

运营需要用多张图片进行OCR识别,图片来源一般是运营的截图,直接粘贴过来,然后需求请求OCR截图提交图片list,粘贴图片的同时需要上传图片到cdn地址;

分析

  • 一个输入框(富文本框),这里没有用到富文本本身带的上传图片工具,如有用到直接配置上传图片就可以
  • 需要监听粘贴事件clipboardData
  • 监听粘贴事件上传图片
  • 获取所有粘贴的图片地址请求ocr接口

代码

<div class="ocr-content"><quill-editor ref="myQuillEditor" v-model="quillContent" :options="editorOption"></quill-editor>
</div>
data () {return {quillContent: '',editorOption: {theme: 'snow', // or 'bubble'placeholder: '将图片按Ctrl+V 粘贴至此处',modules: {clipboard: {matchers: [['img', this.handlePasteImg]]},toolbar: false}}}
},
methods: {handlePasteImg(node, delta) {let ops = []delta.ops.forEach(async (op, index) => {if (op.insert && typeof op.insert !== 'string') {  // 如果粘贴了图片,这里会是一个对象if (op.insert.image) {if (op.insert.image.includes(';base64')) {let file = this.dataURLtoFile(op.insert.image, `paste-${Math.random().toString(36).slice(-8)}.jpg`)const [res, err] = await apiService.getUploadToken()if (err) return false// key 值可以自己用当前日期生成let key = `page/${getCurrentDate('/')}/${new Date().getTime()}${Math.random().toString(36).slice(-8)}.jpg`let origin = res.data.picture.originconst fd = new FormData()fd.append('key', key)fd.append('token', res.data.picture.token)fd.append('origin', origin)fd.append('time', new Date().getTime())fd.append('file', file)apiService.uploadImage(fd).then(res => {console.log(res, 'res')let quill = this.$refs.myQuillEditor.quill // 获取富文本对象let length = quill.getSelection().index     // 获取编辑器光标位置quill.insertEmbed(length, 'image', `${origin}/${res.key}`) // 插入图片  图片地址quill.setSelection(length + 1)              // 光标后移一位   调整光标到最后}).catch(err => {console.log(err)})}}}})delta.ops = ops  // 不加会报错return delta},dataURLtoFile(dataurl, name) {let arr = dataurl.split(',')let mime = arr[0].match(/:(.*?);/)[1]let bstr = atob(arr[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while(n--){u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], name, {type:mime})},// 提取富文本中image中的srcextractImageSrc(htmlString) {let imgSrcArray = []let imgTagRegex = /<img[^>]+src=['"]([^'"]+)['"][^>]*>/glet matchwhile ((match = imgTagRegex.exec(htmlString)) !== null) {let src = match[1]imgSrcArray.push(src)}return imgSrcArray},// ocr识别async handleImageOCR() {if (!this.quillContent) {this.$Message.error('请上传图片!')return false}let imageList = this.extractImageSrc(this.quillContent)if (Array.isArray(imageList) && imageList.length) {const [res, err] = await service.ocrResult(imageList)if (err) returnif (res.ok && res.data) {this.ocrDescribe = res.data} }},
}

参考

  • vue前端富文本组件 quill-editor 粘贴图片的处理
  • vue-quill-editor粘贴截图base64改上传

这篇关于使用vue-quill-editor实现图片截图复制粘贴上传的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/856205

相关文章

使用Java解析JSON数据并提取特定字段的实现步骤(以提取mailNo为例)

《使用Java解析JSON数据并提取特定字段的实现步骤(以提取mailNo为例)》在现代软件开发中,处理JSON数据是一项非常常见的任务,无论是从API接口获取数据,还是将数据存储为JSON格式,解析... 目录1. 背景介绍1.1 jsON简介1.2 实际案例2. 准备工作2.1 环境搭建2.1.1 添加

Java实现任务管理器性能网络监控数据的方法详解

《Java实现任务管理器性能网络监控数据的方法详解》在现代操作系统中,任务管理器是一个非常重要的工具,用于监控和管理计算机的运行状态,包括CPU使用率、内存占用等,对于开发者和系统管理员来说,了解这些... 目录引言一、背景知识二、准备工作1. Maven依赖2. Gradle依赖三、代码实现四、代码详解五

java如何分布式锁实现和选型

《java如何分布式锁实现和选型》文章介绍了分布式锁的重要性以及在分布式系统中常见的问题和需求,它详细阐述了如何使用分布式锁来确保数据的一致性和系统的高可用性,文章还提供了基于数据库、Redis和Zo... 目录引言:分布式锁的重要性与分布式系统中的常见问题和需求分布式锁的重要性分布式系统中常见的问题和需求

SpringBoot基于MyBatis-Plus实现Lambda Query查询的示例代码

《SpringBoot基于MyBatis-Plus实现LambdaQuery查询的示例代码》MyBatis-Plus是MyBatis的增强工具,简化了数据库操作,并提高了开发效率,它提供了多种查询方... 目录引言基础环境配置依赖配置(Maven)application.yml 配置表结构设计demo_st

如何使用celery进行异步处理和定时任务(django)

《如何使用celery进行异步处理和定时任务(django)》文章介绍了Celery的基本概念、安装方法、如何使用Celery进行异步任务处理以及如何设置定时任务,通过Celery,可以在Web应用中... 目录一、celery的作用二、安装celery三、使用celery 异步执行任务四、使用celery

使用Python绘制蛇年春节祝福艺术图

《使用Python绘制蛇年春节祝福艺术图》:本文主要介绍如何使用Python的Matplotlib库绘制一幅富有创意的“蛇年有福”艺术图,这幅图结合了数字,蛇形,花朵等装饰,需要的可以参考下... 目录1. 绘图的基本概念2. 准备工作3. 实现代码解析3.1 设置绘图画布3.2 绘制数字“2025”3.3

Jsoncpp的安装与使用方式

《Jsoncpp的安装与使用方式》JsonCpp是一个用于解析和生成JSON数据的C++库,它支持解析JSON文件或字符串到C++对象,以及将C++对象序列化回JSON格式,安装JsonCpp可以通过... 目录安装jsoncppJsoncpp的使用Value类构造函数检测保存的数据类型提取数据对json数

python使用watchdog实现文件资源监控

《python使用watchdog实现文件资源监控》watchdog支持跨平台文件资源监控,可以检测指定文件夹下文件及文件夹变动,下面我们来看看Python如何使用watchdog实现文件资源监控吧... python文件监控库watchdogs简介随着Python在各种应用领域中的广泛使用,其生态环境也

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景:问题描述解决方案:项目场景:从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置:简单、快速、无障碍二、基本功能:从彩色文本到动态交互1. 显示基本内容2. 创建链