vue-quill-editor使用中图片上传优化与element-ui集成

版权申诉

95 浏览量更新于2024-09-11 收藏 77KB PDF 举报

在Vue应用中使用vue-quill-editor富文本编辑器时，开发者可能会遇到一些问题，本文将着重讨论在结合vue、element-ui、vue-quill-editor以及图片上传功能时遇到的挑战。当用户在编辑器中插入图片时，由于vue-quill-editor默认将图片转换为base64格式，这可能导致上传内容过大，超出服务器接收POST数据的限制，从而引发上传失败，给用户体验带来负面影响。为解决这个问题，文章介绍了一个解决方案，即引入Element UI库来增强编辑器的功能。编辑器组件`editor.vue`中，作者添加了一个`el-upload`组件，用于图片的上传。这个组件配置了`action`属性指向后端接口，`accept`属性限制了可接受的图片类型，并通过`http-request`选项自定义了上传请求。`before-upload`钩子函数用于预处理上传前的图片，`on-success`和`on-error`分别处理上传成功和失败的回调。在数据部分，引入了axios库进行网络请求，COS-js-sdk-v5用于处理阿里云对象存储，同时引用了自定义的`Upload.vue`组件以及`quill-title.js`中的辅助工具，用于管理和美化富文本编辑器。此外，还导入了Quill编辑器的核心样式和主题样式。这篇文章为读者提供了一种实践方法，即如何在vue-quill-editor的基础上优化图片上传功能，避免因内容过大导致的上传问题，提升了用户的使用体验。通过集成Element UI组件和适当的配置，开发者可以更好地控制和优化富文本编辑器的交互行为。

浅谈浅谈vue中使用编辑器中使用编辑器vue-quill-editor踩过的坑踩过的坑

主要介绍了浅谈vue中使用编辑器vue-quill-editor踩过的坑，具有很好的参考价值，希望对大家有所帮助。一起

跟随小编过来看看吧

结合vue+element-ui+vue-quill+editor二次封装成组件

1.图片上传图片上传

分析原因

项目中使用vue-quill-editor富文本编辑器，在编辑内容的时候，我们往往会编辑图片，而vue-quill-editor默认的处理方式是直

接将图片转成base64格式，导致上传的内容十分庞大，且服务器接受post的数据的大小是有限制的，很有可能就提交失败，

造成用户体验差。

引入引入element-ui

编辑editor.vue文件

<div>

<el-upload

class="avatar-uploader"

action=""

accept="image/jpg, image/jpeg, image/png, image/gif"

:http-request="upload"

:before-upload="beforeUploadImg"

:on-success="uploadSuccess"

:on-error="uploadError"

:show-file-list="false">

</el-upload>

</div>

</template>

import axios from '@/API/';

import { quillEditor } from "vue-quill-editor";

import COS from "cos-js-sdk-v5";

import Upload from '@/components/Upload.vue';

import { addQuillTitle } from '../utils/quill-title.js';

import "quill/dist/quill.core.css";

import "quill/dist/quill.snow.css";

import "quill/dist/quill.bubble.css";

export default {

data() {

return {

}

methods: {

// 上传图片前

beforeUpload(res, file) {

const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'

const isLt1M = file.size / 1024 / 1024 < 1

if (!isJPG) {

this.$message.error('支持JPG、PNG格式的图片，大小不得超过1M')

}

if (!isLt1M) {

this.$message.error('文件最大不得超过1M')

}

return isJPG && isLt1M

// 上传图片成功

uploadSuccess(res, file) {},

// 上传图片失败

uploadError(res, file) {},

// 上传图片处理过程

upload(req){}

}

</script>

在editor.vue中引入vue-quill-editor

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38731027

粉丝: 4

vue-quill-editor使用中图片上传优化与element-ui集成

vue3.0 vue-quill-editor.rar

详解vue中使用vue-quill-editor富文本小结（图片上传）

quillEditor.rar

vue富文本编辑器 vue-quill-editor.js quill版本1.3.6

Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

Vue富文本编辑器vue-quill-editor在AX7020开发板中的应用与功能详解

vue使用富文本编辑器vue-quill-editor 怎么调整图片大小

vue中怎么使用vue-quill-editor

vue富文本编辑器vue-quill-editor

vue3富文本编辑器vue-quill-editor预览

最新资源