zoukankan      html  css  js  c++  java
  • 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 {
             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-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
  • 相关阅读:
    画多个立方体组成的正方体
    MATLAB 图形着色
    patch函数的解释2
    patch函数的解释1
    矩阵方程求解内置函数
    Hessian矩阵
    MATLAB卷积运算(conv、conv2、convn)解释
    MATLAB常用快捷键命令总结
    稀疏矩阵绘制
    P1855 榨取kkksc03【多维01背包】
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/13601480.html
Copyright © 2011-2022 走看看