[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下比较混乱

---

方法

1.getData()

事件处理程序可以通过调用事件的 clipboardData 属性上的 getData()访问剪贴板内容。

2.event.preventDefault()

要覆盖默认行为（例如，插入一些不同的数据或转换剪贴板的内容），事件处理程序必须使用 event