原创=====>富文本wangeditor图片自定义上传及图片删除
https://blog.csdn.net/weixin_45111619/article/details/101428699
根据该博主改写了删除功能,鄙人学识浅薄,轻喷!
<script lang="ts" setup>
import { articleImageAip } from '@/api'
import { onMounted, ref } from 'vue'
import E from 'wangeditor'
let editor = ref<E>()
let articleId = uuid(16)
let content = ref()
//记录上传成功的url地址
let imgsrc: any[] = []
//使用富文本框,要在挂载完成后使用
onMounted(() => {
editor.value = new E('#div1')
editor.value.config.uploadImgServer = 'http://localhost:8888/chapter/articleImages'
editor.value.config.uploadImgParams = {
articleId,
}
//监听事件
editor.value.config.onchange = function (newHtml: string) {
content.value = newHtml
if (imgsrc.length !== 0) {
let nowimgs = getSrc(newHtml)
let merge = imgsrc.concat(nowimgs).filter(function (v, i, arr) {
return arr.indexOf(v) === arr.lastIndexOf(v)
})
let fileName = ''
for (let x in merge) {
let colds = merge[x].split('/')
fileName = colds[colds.length - 1] //获取url中的文件名
}
if (fileName != '') {
console.log('fileName', fileName)
const options = {
method: 'delete',
params: {
fileName: fileName,
},
}
//传文件名到后端删除
articleImageAip(options).then((res) => {
if (res.data.code == 0) {
console.log('删除成功')
}
})
}
imgsrc = nowimgs
}
}
editor.value.config.uploadImgHooks = {
//上传图片成功后的回调函数
success: function (xhr) {
//JSON.parse(xhr.response).data[0]就是上传成功后的图片url
//保存到imgsrc中
imgsrc.push(JSON.parse(xhr.response).data[0])
console.log('success', JSON.parse(xhr.response).data[0])
},
}
editor.value.config.uploadFileName = 'img'
editor.value.create()
editor.value.txt.clear()
})
const getSrc = (html: any) => {
var imgReg = /<img.*?(?:>|\/>)/gi
// 匹配src属性
var srcReg = /src=[\\"]?([^\\"]*)[\\"]?/i
var arr = html.match(imgReg)
let imgs = []
if (arr) {
for (let i = 0; i < arr.length; i++) {
var src = arr[i].match(srcReg)[1]
imgs.push(src)
}
}
return imgs
}
</script>
后端
@DeleteMapping("/articleImages")
public R articleImages(@RequestParam("fileName")String fileName){
System.out.println(fileName);
String fileFakePath=fakePath+"article/"+fileName;
String fileRealPath=localPath+"article/"+fileName;
File file = new File(fileRealPath);
if (file.exists()){
file.delete();
return R.ok();
}
else return R.error();
}
原创=====>富文本wangeditor图片自定义上传及图片删除
https://blog.csdn.net/weixin_45111619/article/details/101428699