wangeditor上传图片配置 vue

WangEditor是一款轻量级的富文本编辑器，如果要在Vue项目中集成并配置图片上传功能，你可以按照以下步骤进行设置：

1. 安装依赖：首先需要安装`wangeditor`和`axios`（或其他HTTP客户端库），用于处理文件上传。可以使用npm或yarn命令行工具：

   npm install @wangeditor/editor axios --save

2. 引入组件：在你的Vue文件中引入WangEditor组件和上传插件（如果是需要的话）：

   <script src="node_modules/@wangeditor/editor/dist/wangEditor.min.js"></script>
   <script src="node_modules/@wangeditor/editor/plugin/image/index.js"></script>

3. 配置编辑器：在Vue的实例中初始化编辑器，并开启图片上传功能，通常会在组件的data或setup钩子函数里进行配置：

   import WangEditor from '@wangeditor/editor'
   import ImagePlugin from '@wangeditor/editor/plugin/image'

   export default {
     setup() {
       const editor = ref(null)
       const uploadImg = async (file) => {
         // 使用axios发送POST请求上传图片
         try {
           const formData = new FormData()
           formData.append('image', file)
           const response = await axios.post('/api/upload-image', formData, {
             headers: {'Content-Type': 'multipart/form-data'}
           })
           // 将返回的URL赋值给图片地址
           return response.data.url
         } catch (error) {
           console.error(error)
         }
       }

       onMounted(() => {
         const options = {
           height: 400,
           // 添加图片插件
           plugins: [ImagePlugin],
           // 图片上传相关配置
           imageUpload: {
             url: '/api/upload-image', // 服务器接收图片的接口 URL
             success: function(res) { // 上传成功回调
               editor.value.insertImage(res.url)
             },
             error: function(err) { // 上传失败回调
               console.error(err)
             }
         }
         editor.value = WangEditor.create('#editor', options)
       })

       return { editor }
     }
   }

4. 创建HTML模板：

   <div id="editor" v-model="editor">
   </div>