需求:将富文本中的图片网络地址,正则匹配出来,上传到内部服务器
vue template
<RtfVue :rtf="attr.rtf" :tinymce_config="tinymce_config" @rtfChange="rtfChange" />
methods: {
async replaceImgSrc(rtf) {
// 匹配出img
let imgReg = /<img.*?(?:>|\/>)/gi
let matchImg = rtf.match(imgReg)
// 匹配出src地址
let srcReg = / src=[\'\"]?([^\'\"]*)[\'\"]?/i
if(!matchImg) {
return rtf
}
let srcArr = matchImg.map(str => {
if(!str.match(srcReg)[1].startsWith('/')) {
return str.match(srcReg)[1]
}
}).filter(src => !!src)
if (srcArr.length == 0) {
return rtf
}
let replacedValue = rtf
for (let i = 0; i < srcArr.length; i++) {
let convertImg
try {
convertImg = await this.covertImgSrc(srcArr[i])
} catch (error) {
convertImg = srcArr[i]
}
replacedValue = replacedValue.replaceAll(srcArr[i], convertImg)
}
return replacedValue
},
async covertImgSrc(item) {
let uploadUrl
try {
//上传到后端服务器
uploadUrl = await picUpload({file: item}, 'url')
} catch (error) {
uploadUrl = { uploadUrl: item }
}
return uploadUrl.url_path
},
async rtfChange(_rtf) {
let rtf = await this.replaceImgSrc(_rtf)
// console.log('本地rtf发生变化,通知父级更新', this.rtf)
this.UpdateAttr({ attr: { rtf }, bkId: this.bkId })
},
},