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 方法中循环遍历上传每一张图片。
