VUE setup语法糖中使用 富文本wangeditor 删除图片

原创=====>富文本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