vue-quill-editor上传附件

### 如何在 `vue-quill-editor` 中实现文件上传功能 为了实现在 `vue-quill-editor` 中的文件上传功能，可以通过自定义模块来扩展编辑器的能力。具体来说，可以利用 Quill 的 blot 或者通过监听粘贴事件和点击插入图片按钮的方式处理文件上传逻辑。 #### 安装依赖库 首先确保已经安装了必要的依赖项： ```bash npm install vue-quill-editor axios --save ``` 这会引入 `vue-quill-editor` 和用于发起 HTTP 请求的 `axios` 库[^2]。 #### 创建自定义工具栏按钮组件 创建一个新的 Vue 组件作为自定义工具栏的一部分，专门用来触发文件选择对话框以及执行实际的文件上传操作。 ```html <template> <div class="ql-toolbar"> <!-- 其他默认工具栏选项 --> <label class="custom-file-upload-btn"> 图片/附件 <input type="file" @change="handleFileChange"/> </label> </div> </template> <script> export default { methods: { handleFileChange(event){ const file = event.target.files[0]; if (!file) return; this.uploadImage(file); }, async uploadImage(file){ try{ let formData = new FormData(); formData.append('image', file); // 假设服务器端有一个接收 POST /upload 接口 const response = await axios.post('/api/upload', formData, { headers: {'Content-Type': 'multipart/form-data'} }); // 获取返回的 URL 并将其插入到编辑区中 const url = response.data.url; this.$emit('insert-image', {url}); } catch(error){ console.error("Failed to upload image", error); } } } } </script> ``` 此代码片段展示了如何构建一个简单的文件输入控件，并在其改变时调用 `uploadImage()` 方法来进行文件上传。成功后，它还会向父级组件发出带有新图像链接的对象的通知[^1]。 #### 修改主应用以支持新的插件行为 最后一步是在应用程序的主要部分注册这个新创建的工具条组件，并设置好相应的回调函数以便能够正确地将外部资源嵌入至富文本区域内部。 ```javascript import Vue from 'vue'; import Editor from '@components/editor'; // 自定义编辑器组件路径 // ...其他导入语句... new Vue({ el: '#app', data(){ return { editorOptions:{ modules: { toolbar: [ ['bold', 'italic'], [{'list':'ordered'},{'list':'bullet'}], [{header:[1,2,3,4,'false']}], ['link','clean'], ['customUploadButton'] // 添加我们自己的按钮名称 ] } } }; }, components:{Editor}, mounted() { window.Quill.register('formats/imageUploader', ImageUploader); // 注册格式化处理器 this.editorRef = new Quill('#editor-container',{ theme:'snow', placeholder:"请输入内容...", ...this.editorOptions, handlers: { customUploadButton: () => document.querySelector('.custom-file-upload-btn').click() } }); } }) ``` 上述配置使得当用户点击“图片/附件”按钮时实际上就是激活了一个隐藏的 `<input>` 控制从而允许他们挑选本地磁盘上的任意文件；而一旦选择了某个具体的对象，则立即启动异步传输过程并将最终得到的结果反馈给前端界面显示出来。