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