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