使用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实现图片截图复制粘贴上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---