vue3 wangEditor富文本自定义上传本地图片

Vue3和WangEditor都提供了上传本地图片的功能，可以结合使用实现自定义上传本地图片。

首先，在Vue3中，我们可以使用 onFileChange 事件来监听文件选择器的变化，获取到选中的本地图片文件。然后，将这个文件传递给WangEditor，让WangEditor进行上传。

在WangEditor中，我们可以通过配置 uploadImgServer 和 uploadImgParams 来实现上传本地图片。其中，uploadImgServer 是图片上传接口地址，uploadImgParams 是图片上传时需要传递的参数。我们可以将Vue3中获取到的本地图片文件传递给 uploadImgParams 中，再提交到服务器进行上传。

以下是一个简单的实现示例：

<template>
  <div class="editor-wrapper">
    <div ref="editorElem" class="editor"></div>
    <input type="file" ref="fileInput" @change="onFileChange">
  </div>
</template>

<script>
import WangEditor from 'wangeditor'

export default {
  mounted() {
    // 初始化WangEditor
    const editor = new WangEditor(this.$refs.editorElem)

    // 配置图片上传接口地址
    editor.config.uploadImgServer = 'http://xxx/upload'
    
    // 配置图片上传时需要传递的参数
    editor.config.uploadImgParams = {
      file: null // file字段用于接收本地图片文件
    }

    // 自定义上传方法，将上传的文件传递给WangEditor
    editor.config.customUploadImg = function (files, insertImgFn) {
      const formData = new FormData()
      formData.append('file', files[0])
      this.uploadImgParams.file = files[0]
      const xhr = new XMLHttpRequest()
      xhr.open('POST', this.uploadImgServer, true)
      xhr.onload = function (e) {
        if (xhr.status === 200) {
          const response = JSON.parse(xhr.responseText)
          insertImgFn(response.data.url) // 插入图片
        }
      }
      xhr.send(formData)
    }

    // 创建编辑器
    editor.create()
  },
  methods: {
    onFileChange(e) {
      const file = e.target.files[0]
      const editor = WangEditor.getEditor(this.$refs.editorElem)
      editor.uploadImgParams.file = file // 将获取到的本地图片文件传递给WangEditor的上传参数
      editor.uploadImg() // 调用WangEditor的上传图片方法
      this.$refs.fileInput.value = '' // 重置文件选择器的值，以便下一次选择
    }
  }
}
</script>

<style scoped>
.editor-wrapper {
  position: relative;
}
.editor {
  height: 500px;
}
.file-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
</style>

在这个示例中，我们在Vue3中创建了一个WangEditor实例，并进行了相关配置。在自定义上传方法 customUploadImg 中，我们获取到了本地图片文件，并将其传递给了 uploadImgParams 中的 file 字段，然后通过XMLHttpRequest进行上传。在 onFileChange 事件中，我们监听了文件选择器的变化，获取到选中的本地图片文件，并调用了WangEditor的上传图片方法。最后，我们重置了文件选择器的值，以便下一次选择。

需要注意的是，本示例中只演示了如何上传单张图片。如果要支持多张图片上传，需要在 uploadImgParams 中传递一个文件数组，然后在 customUploadImg 方法中循环遍历上传每一张图片。