el-upload和vue-quill-editor各自的优缺点

对于el-upload和vue-quill-editor这两个组件，它们各自都有一些优缺点。

el-upload是一个基于Element UI组件库的上传组件，它非常易于使用，并且提供了很多自定义选项。它支持多文件上传、拖拽上传、图片压缩等功能。同时，它还提供了很多事件，可以方便地监听上传的状态。但是，它只是一个上传组件，并没有提供富文本编辑的功能。

vue-quill-editor是一个基于Quill富文本编辑器的Vue组件，它提供了非常丰富的富文本编辑功能，包括格式化、插入图片、插入表格等等。并且，它支持自定义工具栏和自定义样式。但是，与el-upload相比，它的使用有一些复杂，需要引入Quill富文本编辑器这个库，并且需要进行一些配置。同时，它的体积比el-upload也要大一些。

综上所述，如果只需要一个上传组件，那么el-upload是一个很不错的选择；如果需要一个富文本编辑器，并且可以接受一些配置的复杂度，那么vue-quill-editor是更合适的选择。

相关问题

vue-quill-editor 添加自定义

在使用vue-quill-editor添加自定义按钮样式时，你可以通过以下步骤进行操作：

1. 在组件的`<quill-editor>`标签中添加`ref`属性，以便在后续的方法中可以访问到这个组件。例如：

   <quill-editor ref="myQuillEditor"></quill-editor>

2. 在`methods`中定义一个方法来初始化自定义按钮的样式。你可以通过`querySelector`方法找到对应的按钮节点，然后设置其内容为你想要的图标样式。例如：

   initButton() {
     const editorButton = document.querySelector('.ql-upload');
     editorButton.innerHTML = '<i class="el-icon-upload" style="font-size: 18px;color:black"></i>';
   }

3. 在组件渲染完成之后，调用初始化按钮样式的方法。可以在`mounted`生命周期钩子中调用这个方法。例如：

   mounted() {
     this.initButton();
   }

这样，你就可以通过上述步骤来添加自定义按钮样式到vue-quill-editor中了。请确保在组件渲染完成之后进行操作，否则可能找不到对应的节点。

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 ]