vue3 wangEditor富文本框上传图片

Vue3 中使用 WangEditor 这款富文本编辑器插件上传图片通常涉及以下几个步骤：

1. **安装依赖**：
首先需要在项目中安装 WangEditor 和相关的文件上传组件，例如使用 axios 或者其他的 HTTP 请求库来发送请求。可以使用 npm 安装：

   npm install @wangeditor/editor axios --save

2. **引入并初始化编辑器**：
在 Vue 组件中导入编辑器和配置，然后在 mounted 生命周期钩子中初始化 Wangeditor：

   <template>
     <div ref="editor"></div>
   </template>

   <script>
   import { createEditor } from '@wangeditor/editor'
   import axios from 'axios'

   export default {
     setup() {
       const editor = ref(null)

       onMounted(() => {
         const options = {} // 初始化配置
         createEditor(editor.value, options)
       })

       //...
     }
   }
   </script>

3. **添加图片上传功能**：
使用编辑器提供的 API 如 `insertImage` 插入图片时，可以在回调函数中处理图片上传。比如，当用户点击插入图片按钮时，可以选择本地图片并发送到服务器：

   methods: {
     uploadImage(file) {
       axios.post('/api/upload', file, {
         // 根据实际需求设置 headers 或其他参数
         // 将文件转换成 formData 或者 base64 字符串
       }).then(response => {
         if (response.data.url) {
           this.editor.value.insertImage(response.data.url) // 插入服务器返回的图片 URL
         }
       })
     },
   },

然后在模板中绑定事件监听器，如 `@drop` 或 `@change` 来处理文件选择。