[Vue3] Wangeditor富文本实现将粘贴中包含的图片自动上传后台,并替换src-Toy模板网

这篇具有很好参考价值的文章主要介绍了[Vue3] Wangeditor富文本实现将粘贴中包含的图片自动上传后台,并替换src。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

 因为老大突然说 网站后台负责维护的人员 上传到富文本(为了SEO就不用贴图)的内容, 
 一些图片显示失败,我一看还真是
之前好不容易弄好这个富文本的图片上传功能(就是点击图片, 选择上传)
还真没有想到他们直接扒过来别的网站内容(尤其里面包含图片)
这时候加入这个网站设置跨域, 图片就会因为跨域显示403失败,无法加载出来.

吐槽: 还以为他们富文本把文字写好, 在一个个上传图片, 组成一片文章. 那就没有办法了, 只能修改下代码增加下自动上传图片功能. 后来写到一半才发现html 有个属性好像可以让跨域的图片显示出来. <meta name="referrer" content="no-referrer" />

 暂时不太理解这个代码, 也不清楚有没有副作用, 希望有懂的大佬说下.

以为这样就可以不用写了, 但是老大说万一以后别人网站的图片不维护了, 那这个引用还是导致图片显示失败, 还是上传到后台保险. 嘚, 代码还是要写.

1. 具体思路

因为自己代码写得很烂, 就把关键的代码贴出来供大家参考, 当然不止WangEditor富文本编辑器能用, 其他地方需要粘贴时候自动上传图片也能实现, 原理都是一样的

(无非其他地方需要自己选择DOM节点, 触发粘贴事件, 然后具体完成后, 在这个DOM节点插入处理好的内容)

1.1 介绍过程

概念会如下再介绍, 先说说具体过程, 就是

首先通过粘贴事件触发, 停止默认粘贴事件, 获取其text/html的内容
使用字符串正则 match匹配内容中符合 <img … src= “…”>这样的内容, 获得匹配字符串数组
对数组遍历, 传入url在图片onload加载好后触发回调函数, 会将图片转为base64
base64 转 Blob
Blob 转 file
将file 传入请求上传后台函数
当全部图片上传后, 我是创建一个Map类型, 通过replace去匹配替换html中的src的内容
将其insert 插入

1.2 介绍概念

先跟大家介绍一些用到的概念, 方便后续理解

1.1.1 Paste粘贴事件

当用户在浏览器用户界面发起“粘贴”操作时，会触发 paste 事件。

触发大致代码如下:

const target = document.querySelector('div.target');

target.addEventListener('paste', (e) => {...
});

具体操作

1.获取事件对象

粘贴事件提供了一个clipboardData的属性，如果该属性有items属性，那么就可以查看items中是否有图片类型的数据了

clipboardData介绍

它实际上是一个DataTransfer类型的对象

clipboardData的属性介绍

属性	类型	说明
dropEffect	String	默认是 none
effectAllowed	String	默认是 uninitialized
files	FileList	粘贴操作为空List
items	DataTransferItemList	剪切板中的各项数据
types	Array	剪切板中的数据类型该属性在Safari下比较混乱