vue富文本+图片上传到服务器

富文本默认图片转换为base64，改为上传到制定服务器

<template>
    <div>
        <el-form :model="form" ref="form" >

            <el-upload
                    class="avatar-uploader"
                    action="/mdr/api/website/uploadFile"
                    name="uploadFile"
                    :show-file-list="false"
                    :on-success="uploadSuccess"
                    :http-request="handleUploadForm"
                    :before-upload="beforeUpload"
            ></el-upload>
            <el-row  v-loading="quillUpdateImg">
                <quill-editor
                        v-model="form.content"
                        ref="myQuillEditor"
                        :options="editorOption"
                ></quill-editor>
            </el-row>
            <el-form-item class="mt15">
                <el-button  type="primary" style="margin-left: 390px" @click="save(3)">Save Draft</el-button>
                <el-button  type="danger" @click="save(1)">Publish</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>

<script>
    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 { getExport } from '@/utils/request'

    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: [] }],
        ["link", "image", "video"],
        ["clean"] // remove formatting button
    ];
    export default {
        components:{
            quillEditor
        },
        data() {
            return {
                quillUpdateImg: false,
                content: "",
                editorOption: {
                    placeholder: "",
                    theme: "snow", // or 'bubble'
                    modules: {
                        toolbar: {
                            container: toolbarOptions, // 工具栏
                            //点击按钮选择本地图片
                            handlers: {
                                image: function(value) {
                                    if (value) {
                                        // 触发input框选择图片文件
                                        document.querySelector(".avatar-uploader input").click()//获取第一个上传组件事件
                                        //如果页面有多个上传组件，用这个 1为下标
                                        //document.querySelectorAll(".avatar-uploader input")[1].click()
                                        debugger
                                        console.log(clicked)
                                    } else {
                                        this.quill.format("image", false);
                                    }
                                }
                            }
                        }
                    }
                },
                form:{
                    content:''
                },
            };
        },
        methods: {
            beforeUpload() {
                this.quillUpdateImg = true;
            },
            handleUploadForm (param) {
                debugger
                let thiz = this
                let formData = new FormData()
                formData.append('type', "vessel") // 额外参数
                formData.append('file', param.file)
                let loading = thiz.$loading({
                    lock: true,
                    text: '上传中，请稍候...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                getExport(formData).then((re) => {
                    debugger
                    let quill = this.$refs.myQuillEditor.quill;
                    // 如果上传成功
                    if (true) {
                        let length = quill.getSelection().index;
                        quill.insertEmbed(length, "image", re.fileUrl);
                        quill.setSelection(length + 1);
                    } else {
                        this.$Message.error("图片插入失败");
                    }
                    this.quillUpdateImg = false;
                    loading.close()
                })
            },
            uploadSuccess(res, file) {
                let quill = this.$refs.myQuillEditor.quill;
                if (true) {
                    let length = quill.getSelection().index;
                    quill.insertEmbed(length, "image", res.filename);
                    quill.setSelection(length + 1);
                } else {
                    this.$Message.error("图片插入失败");
                }
                this.quillUpdateImg = false;
            },

            save(status){
                this.form.status = status
                const param = this.form
                debugger
                console.log(param)
            },
        }
    };
</script>