vue——quill-editor自定义图片上传

参考：https://www.cnblogs.com/shuihanxiao/p/11081035.html

　　    https://www.jianshu.com/p/9e4e4d955d0f

　　   https://www.cnblogs.com/look-up-at-the-starlit-sky/p/12048001.html

 

我的情况

vue项目中使用quill-editor，上传图片过大后，因为quill-editor中的图片上传是将图片转为base64格式的，保存时传给服务器的就字符长度就会过长，所以想针对图片单独上传至后端。

 

vue

<template>
    <div class="bg-box">
        <quill-editor
                v-model="content"
                ref="myQuillEditor"
                class="editer"
                :options="editorOption"
        ></quill-editor>
    </div>
</template>

<script>
    import API from "../../../api/index.js";//请求基础路径
    import {quillEditor} from "vue-quill-editor"; //调用编辑器
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    import axios from "axios";

    //富文本框文件上传配置
    const uploadConfig = {
        action: '',  // 必填参数 图片上传地址
        methods: '',  // 必填参数 图片上传方式
        token: '',  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
        name: 'img',  // 必填参数 文件的参数名
        size: 500,  // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
        accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'  // 可选 可上传的图片格式
    };
    // 工具栏配置
    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],

        [{'header': 1}, {'header': 2}],               // custom button values
        [{'list': 'ordered'}, {'list': 'bullet'}],
        [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
        [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
        [{'direction': 'rtl'}],                         // text direction

        [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
        [{'header': [1, 2, 3, 4, 5, 6, false]}],

        [{'color': []}, {'background': []}],          // dropdown with defaults from theme
        [{'font': []}],
        [{'align': []}],
        ['clean'],                                      // remove formatting button
        ['link', 'image', 'video'],
    ];

    const handlers = {
        //重写图片上传
        image: function image() {
            let self = this;

            let fileInput = this.container.querySelector('input.ql-image[type=file]');
            if (fileInput === null) {
                fileInput = document.createElement('input');
                fileInput.setAttribute('type', 'file');
                // 设置图片参数名
                if (uploadConfig.name) {
                    fileInput.setAttribute('name', uploadConfig.name);
                }
                // 可设置上传图片的格式
                fileInput.setAttribute('accept', uploadConfig.accept);
                fileInput.classList.add('ql-image');
                // 监听选择文件
                fileInput.addEventListener('change', function () {
                    let params = new FormData();
                    params.append('file', fileInput.files[0]);
                    axios.post(API.imgUpLoad, params, {
                        headers: {
                            'Content-Type': 'multipart/form-data',
                            'token': sessionStorage.getItem('token')
                        }
                    }).then(function (res) {
                        if (res.status === 200) {
                            let length = self.quill.getSelection(true).index;
                            //写入图片
                            self.quill.insertEmbed(length, 'image', res.data.path);
                            self.quill.setSelection(length + 1)
                        } else {
                            self.$message.error(res.data.message);
                        }
                        fileInput.value = ''
                    })
                });
                this.container.appendChild(fileInput);
            }
            fileInput.click();
        }
    };

    export default {
        components: {
            quillEditor
        },
        data() {
            return {
                content: "", //富文本输入内容
                editorOption: {
                    modules: {
                        toolbar: {
                            container: toolbarOptions,  // 工具栏
                            handlers: handlers,
                        }
                    }
                },
            };
        },
    };
</script>

<style lang="scss" scoped>
    .editer {
        width: 100%;
        margin-top: 24px;
    }

    .bg-box /deep/ .ql-toolbar.ql-snow {
        background-color: #f4f4f4;
    }

    .bg-box /deep/ .ql-container.ql-snow {
        height: 500px;
        background-color: white;
    }
</style>

 

注意

当图片过大，使用v-html写入页面时，图片可能会超出页面。我用css修改无效，用js的replace方法，把后端返回的字符串中的 <img 替换为 <img style="max-width:100%;" 即可

 

1. 替换第一个：

 
let str = 'abcadeacf';
let str1 = str.replace('a', 'o');
console.log(str1);   //obcadeacf
 

 

2. 替换所有：

let str = 'abcadeacf';
let str2 = str.replace(/a/g, 'o');//g是重点，如果替换的为‘/’，需要转义，吧/a/g替换为'/\//g'
console.log(str2);  // obcodeocf