Vue中富文本上传图片功能

1创建富文本

<template>
 
            <div style="border: 1px solid #ccc">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                mode="defofault"
              />
              <Editor
                style="height: 500px; overflow-y: hidden"
                v-model="form.eva"
                :defaultConfig="editorConfig"
                mode="default "
                @onCreated="handleCreated"
              />
            </div>
        
</template>

import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { onBeforeUnmount, shallowRef, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

2配置富文本‘

const imUr = ref('');
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref();
//功能区
const toolbarConfig = {};
const editorConfig = {
  placeholder: '请输入内容...',
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

3.添加自定义上传

//在editorConfig 添加
const editorConfig = {
  placeholder: '请输入内容...',
   MENU_CONF: {
    uploadImage: {
      async customUpload(file, insertFn) {
        console.log(file);
        const forms = new FormData();
        forms.append("参数", file); // 获取上传图片信息
        //  请求接口
        axios
          .post("上传接口", forms, {
            headers: {
              "content-type": "multipart/form-data",
            },
          })
          .then((res) => {
            console.log(res);
            imUr.value = res.data.front_file
            if (res.data.status == 200) {
              console.log(res);

            }
            // file 即选中的文件
            // 自己实现上传，并得到图片 url alt href
            // 最后插入图片
            insertFn( 'http//'+imUr.value , alt, href)
          });


      },


    }
  },
}

注意：打开和关闭表单时可能会出现富文本销毁失效报错

解决：在富文本中添加v-if，在打开或关闭表单事件中添加相应状态

<div style="border: 1px solid #ccc" v-if="text">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                mode="defofault"
              />
              <Editor
                style="height: 500px; overflow-y: hidden"
                v-model="form.eva"
                :defaultConfig="editorConfig"
                mode="default "
                @onCreated="handleCreated"
              />
            </div>
const text=ref()

3