vue3Quill 图片上传

### Vue3 中集成 Quill 富文本编辑器并实现图片上传 #### 组件安装与配置 为了在 Vue3 项目中使用 `vue-quill-editor` 并实现图片上传功能，可以借助 `@vueup/vue-quill` 和 `quill-image-uploader` 扩展模块完成。以下是详细的实现方式。 首先，在项目中安装所需的依赖项： ```bash npm install @vueup/vue-quill quill-image-uploader ``` 接着，在项目的入口文件或组件内部注册这些模块： ```javascript import { QuillEditor, Quill } from '@vueup/vue-quill'; import 'quill/dist/quill.snow.css'; // 引入样式 import ImageUploader from 'quill-image-uploader'; // 注册 imageUploader 模块到 Quill 编辑器 Quill.register('modules/imageUploader', ImageUploader); export default { components: { QuillEditor, }, data() { return { form: { content: '', // 存储富文本内容 }, editorOption: { modules: { toolbar: [ ['bold', 'italic', 'underline'], // 工具栏选项 [{ list: 'ordered' }, { list: 'bullet' }], ['image'], // 添加图片按钮 ], imageUploader: { // 配置图片上传模块 upload: this.uploadImageToServer, // 自定义上传函数 }, }, }, }; }, methods: { async uploadImageToServer(file) { const formData = new FormData(); formData.append('file', file); // 将图片数据附加到表单对象中 try { const response = await fetch('/api/upload', { // 替换为实际的服务器接口地址 method: 'POST', body: formData, }); if (response.ok) { const result = await response.json(); // 获取返回的数据 return result.url; // 返回图片 URL 地址 } } catch (error) { console.error(error); throw error; } return null; // 如果上传失败，则返回 null 或抛出错误 }, }, }; ``` 上述代码实现了以下功能： - 使用 `QuillEditor` 渲染富文本编辑器。 - 定义了一个自定义工具栏，其中包含加粗、斜体、下划线等功能以及列表和图片插入按钮。 - 利用 `quill-image-uploader` 提供的 `upload` 方法来处理图片上传逻辑[^2]。 #### HTML 结构 在模板部分添加如下结构用于显示编辑器区域： ```html <template> <div> <QuillEditor class="ql-editor" v-model:content="form.content" contentType="html" :options="editorOption"> </QuillEditor> <!-- 显示预览 --> <pre>{{ form.content }}</pre> </div> </template> ``` 此段代码通过绑定模型属性 `v-model:content` 动态同步输入框中的值至变量 `form.content` 上，并设置样式类名以便进一步美化界面效果。 #### 处理粘贴事件（可选） 如果希望当用户复制带有图像的内容时能够触发自动上传操作而不是直接嵌套 base64 数据流的话，则需额外覆盖默认行为。可以通过监听 paste 事件达成目标： ```javascript mounted() { this.$refs.quillRef.getQuill().on('text-change', () => {}); }, methods: { handlePaste(e) { e.preventDefault(); let clipboardData = e.clipboardData || window.clipboardData; Array.from(clipboardData.files).forEach((item) => { if (/^image\//.test(item.type)) { this.uploadImageToServer(item).then(url => { const range = this.$refs.quillRef.getQuill().getSelection(true); this.$refs.quillRef.getQuill().insertEmbed(range.index, 'image', url); }); } }); }, } ``` 最后记得给 `<QuillEditor>` 加上 ref 属性方便获取实例引用： ```html <QuillEditor ref="quillRef" /> ``` 以上即完成了基于 Vue3 的 Quill 富文本编辑器图片上传功能开发流程说明[^1]。 ---