前言
因?yàn)槔洗笸蝗徽f 網(wǎng)站后臺負(fù)責(zé)維護(hù)的人員 上傳到富文本(為了SEO就不用貼圖)的內(nèi)容,
一些圖片顯示失敗,我一看還真是
之前好不容易弄好這個(gè)富文本的圖片上傳功能(就是點(diǎn)擊圖片, 選擇上傳)
還真沒有想到他們直接扒過來別的網(wǎng)站內(nèi)容(尤其里面包含圖片)
這時(shí)候加入這個(gè)網(wǎng)站設(shè)置跨域, 圖片就會因?yàn)榭缬蝻@示403失敗,無法加載出來.
吐槽: 還以為他們富文本把文字寫好, 在一個(gè)個(gè)上傳圖片, 組成一片文章. 那就沒有辦法了, 只能修改下代碼增加下自動上傳圖片功能. 后來寫到一半才發(fā)現(xiàn)html 有個(gè)屬性好像可以讓跨域的圖片 顯示出來. <meta name="referrer" content="no-referrer" />
暫時(shí)不太理解這個(gè)代碼, 也不清楚有沒有副作用, 希望有懂的大佬說下.
以為這樣就可以不用寫了, 但是老大說 萬一以后別人網(wǎng)站的圖片不維護(hù)了, 那這個(gè)引用還是導(dǎo)致圖片顯示失敗, 還是上傳到后臺保險(xiǎn). 嘚, 代碼還是要寫.
1. 具體思路
? 因?yàn)樽约捍a寫得很爛, 就把關(guān)鍵的代碼貼出來供大家參考, 當(dāng)然不止WangEditor富文本編輯器能用, 其他地方需要粘貼時(shí)候自動上傳圖片也能實(shí)現(xiàn), 原理都是一樣的
? (無非其他地方需要 自己選擇DOM節(jié)點(diǎn), 觸發(fā)粘貼事件, 然后具體完成后, 在這個(gè)DOM節(jié)點(diǎn)插入 處理好的內(nèi)容)
1.1 介紹過程
概念會如下再介紹, 先說說具體過程, 就是
- 首先通過粘貼事件觸發(fā), 停止默認(rèn)粘貼事件, 獲取其text/html的內(nèi)容
- 使用字符串正則 match匹配 內(nèi)容中符合 <img … src= “…”>這樣的內(nèi)容, 獲得匹配字符串?dāng)?shù)組
- 對數(shù)組遍歷, 傳入url在圖片onload加載好后觸發(fā)回調(diào)函數(shù), 會將圖片轉(zhuǎn)為base64
- base64 轉(zhuǎn) Blob
- Blob 轉(zhuǎn) file
- 將file 傳入請求上傳后臺函數(shù)
- 當(dāng)全部圖片上傳后, 我是創(chuàng)建一個(gè)Map類型, 通過replace去匹配替換html中的src的內(nèi)容
- 將其insert 插入
1.2 介紹概念
先跟大家介紹一些用到的概念, 方便后續(xù)理解
1.1.1 Paste粘貼事件
當(dāng)用戶在瀏覽器用戶界面發(fā)起“粘貼”操作時(shí)，會觸發(fā)
paste事件。
觸發(fā)大致代碼如下:
const target = document.querySelector('div.target');
target.addEventListener('paste', (e) => {...
});
具體操作
1.獲取事件對象
粘貼事件提供了一個(gè)
clipboardData的屬性，如果該屬性有items屬性，那么就可以查看items中是否有圖片類型的數(shù)據(jù)了
clipboardData介紹
它實(shí)際上是一個(gè)
DataTransfer類型的對象
clipboardData的屬性介紹
| 屬性 | 類型 | 說明 |
|---|---|---|
| dropEffect | String | 默認(rèn)是 none |
| effectAllowed | String | 默認(rèn)是 uninitialized |
| files | FileList | 粘貼操作為空List |
| items | DataTransferItemList | 剪切板中的各項(xiàng)數(shù)據(jù) |
| types | Array | 剪切板中的數(shù)據(jù)類型 該屬性在Safari下比較混亂 |
方法
1.getData()
事件處理程序可以通過調(diào)用事件的 clipboardData 屬性上的 getData()訪問剪貼板內(nèi)容。
2.event.preventDefault()文章來源：http://www.zghlxwxcb.cn/news/detail-761039.html
要覆蓋默認(rèn)行為（例如，插入一些不同的數(shù)據(jù)或轉(zhuǎn)換剪貼板的內(nèi)容），事件處理程序必須使用 event文章來源地址http://www.zghlxwxcb.cn/news/detail-761039.html
到了這里，關(guān)于[Vue3] Wangeditor富文本實(shí)現(xiàn)將粘貼中包含的圖片自動上傳后臺,并替換src的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
