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

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

1.图片上传

分析原因

项目中使用vue-quill-editor富文本编辑器，在编辑内容的时候，我们往往会编辑图片，而vue-quill-editor默认的处理方式是直接将图片转成base64格式，导致上传的内容十分庞大，且服务器接受post的数据的大小是有限制的，很有可能就提交失败，造成用户体验差。

引入element-ui

编辑editor.vue文件

<template>
    <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">
            <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>
<script>
    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

<template>
    <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"