vue-quill-editor上传图片

vue-quill-editor 是一个在 Vue.js 中使用 Quill.js 编辑器的组件。要在其中上传图片，需要使用 Quill 的 API。具体步骤如下：

1. 在编辑器中添加一个上传图片的按钮。
2. 为这个按钮绑定一个事件处理函数，在处理函数中读取用户选择的图片文件。
3. 使用 FormData 对象将图片文件上传到服务器。
4. 在服务器响应中获取图片的 URL。
5. 使用 Quill 的 insertEmbed() 方法将图片插入到编辑器中。

请注意，上传图片需要服务器端支持，并且需要在服务器端配置好上传图片的路由，并返回图片的URL。

相关问题

vue-quill-editor 上传图片

vue-quill-editor 上传图片时，可以将图片转为base64编码。然而，当图片比较大时，提交到后台时，参数过长可能会导致提交失败。 解决这个问题的方法是，将图片动态上传到服务器，然后将图片的网络地址加载到富文本编辑器中，而不是将整个图片的base64编码作为参数提交给后台。 在vue-quill-editor中，可以通过调用element的upload组件来实现图片上传功能。可以将上传组件隐藏起来，并在上传成功后将图片地址加载到富文本编辑器中。 这样一来，富文本内的图片标签只需要存储图片的网络地址就可以了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue-quill-editor 图片上传处理](https://blog.csdn.net/HH18700418030/article/details/119999730)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

vue-quill-editor图片上传

使用vue-quill-editor进行图片上传的方法有多种。一种解决方法是自定义图片上传组件。具体步骤如下：

1. 首先，在vue-quill-editor组件中添加el-upload组件作为图片上传组件。el-upload组件可以隐藏，并且可以通过点击vue-quill-editor中的图片按钮来触发它的点击事件。上传成功后，获取图片地址，并将其插入到光标位置。

2. 在vue-quill-editor组件的下方添加如下代码，用来定义el-upload组件的配置。其中，drag属性表示可以拖拽上传，multiple属性表示可以上传多个文件，headers属性用来设置请求头部，:on-success属性用来设置上传成功后的回调函数，action属性用来设置上传的地址。

3. 在vue-quill-editor组件的data中加入editorOption配置，用来重写点击组件上的图片按钮所执行的代码。具体来说，在toolbar.handlers中重写image方法，使其在点击时触发el-upload组件的点击事件，从而打开文件选择框。

通过以上步骤，你可以实现在vue-quill-editor中进行图片上传的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue-quill-editor 使用-图片上传](https://blog.csdn.net/mynewdays/article/details/105726120)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]