vue3 使用Wangeditor上传音频

Vue3 中使用 Wangeditor（一个基于 Web 的富文本编辑器）集成音频上传功能，通常需要以下几个步骤：

1. **安装依赖**:
首先，在项目中安装 Wangeditor 和上传组件，比如使用 Element Plus 或者其他的第三方插件。可以使用 `npm` 或者 `yarn` 进行安装：

   npm install @wangeditor/editor element-plus el-upload // 或者 yarn add @wangeditor/editor element-plus el-upload

2. **配置编辑器**:
在 Vue 组件中初始化 Wangeditor，并配置音频上传相关的选项。例如：

   <template>
     <el-editor :ref="editorRef" v-model="content" :config="editorConfig">
       <!-- ... -->
     </el-editor>
   </template>

   <script>
   import { ref } from 'vue';
   import Editor from '@wangeditor/editor';
   import ElUpload from 'element-plus/upload';

   export default {
     setup() {
       const editorRef = ref(null);
       const content = ref('');
       const editorConfig = {
         // ... 其他配置
         upload: {
           action: '/api/upload', // 服务器接收文件的 URL
           onDrop(file) {
             // 当用户拖拽文件到富文本编辑器区域时触发
             uploadFile(file);
           },
           onRemove(file) {
             // 删除已上传文件
           }
         }
       };

       async function uploadFile(file) {
         await new Promise((resolve, reject) => {
           const formData = new FormData();
           formData.append('file', file);
           axios.post(editorConfig.upload.action, formData).then(response => {
             if (response.data.success) {
               // 更新内容中包含的音频链接
               content.value = content.value.replace(/\{\{audio\}\}/, response.data.url);
               resolve();
             } else {
               reject(response.data.message);
             }
           }).catch(reject);
         });
       }

       return {
         editorRef,
         content,
         editorConfig,
       };
     }
   };
   </script>

3. **处理上传事件**:
在 `upload` 对象的配置中，你可以定义上传文件的回调函数，如上所示，通过axios或其他HTTP库将文件发送到服务器，并在响应成功后更新编辑器内容中插入的音频URL。