Vue使用vue-quill-editor上传图片路径为服务器路径

前言：
vue-quill-editor富文本框插件的使用十分广泛，最近公司需要写一个指导文档，但发现上传图片时，是直接将图片转成base64显示的，此时提交的文本编辑器内容肯定也是一大串的html+图片base64字符串，这当然不能直接存到数据库数据库去，除非你不怕后端的一顿暴揍

解决思路：
vue-quill-editor有开放很多的扩展和自定义方法，我们通过在mounted初始化中获取自己的toolbar工具栏中的image，劫持image的handler方法，调用我们页面上一个隐藏的input:file上传文件。通过input的change方法去调用接口，获取返回的url，下面就直接上步骤

一、下载vue-quill-editor插件

npm install vue-quill-editor --save

由于vue-quill-editor需要依赖quill，所以没有的quill的也要下载

npm install quill --save

二、页面中导入

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import {
    
     quillEditor } from 'vue-quill-editor'

export default {
    
    
  components: {
    
    
    quillEditor
  }
}

三、页面中使用

<template>
  <div id="app">
    <quill-editor :options="editorOption" v-model="content" ref="myQuillEditor">
    </quill-editor>
    <input
      type="file"
      hidden
      accept=".jpg,.png"
      ref="fileBtn"
      @change="handleChange"
    />
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import http from "./script/httpRequest.js";
import axios from "axios";
import {
     
      quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
     
     
  data() {
     
     
    return {
     
     
      content: "",
      editorOption: {
     
     
        placeholder: "请输入信息详情",
      },
    };
  },
  components: {
     
     
    quillEditor,
  },
  mounted() {
     
     
    if (this.$refs.myQuillEditor) {
     
     
      //myQuillEditor改成自己的
      this.$refs.myQuillEditor.quill
        .getModule("toolbar")
        .addHandler("image", this.imgHandler);
      //这里初始化，劫持toolbar的image的handler方法，在mounted中处理
    }
  },
  methods: {
     
     
    submit() {
     
     
      console.log(this.content);
    },
    imgHandler(state) {
     
     
      if (state) {
     
     
        //触发input的单击 ，fileBtn换成自己的
        this.$refs.fileBtn.click();
      }
    },
    handleChange(e) {
     
     
      const files = Array.prototype.slice.call(e.target.files);
      if (!files) {
     
     
        return;
      }
      let form = new FormData();
      form.append("file", files[0]);
      //由于我的接口是base64上传到服务器的，需要转成base64，否则直接将form文件上传即可
      let reader = new FileReader();
      reader.readAsDataURL(files[0]);
      reader.onload = (e) => {
     
     
        //将url改成自己的地址
        axios.post(url, {
     
     
            image: e.target.result, //如果是是以文件流上传，则改成form
          })
          .then((res) => {
     
     
            console.log(res);
            //这里设置为空是为了联系上传同张图可以触发change事件
            this.$refs.fileBtn.value = "";
            if (res.status === 200) {
     
     
              let selection = this.$refs.myQuillEditor.quill.getSelection();
              //这里就是返回的图片地址，如果接口返回的不是可以访问的地址，要自己拼接
              let imgUrl = res.data.imgUrl;
              //获取quill的光标，插入图片
              this.$refs.myQuillEditor.quill.insertEmbed(
                selection != null ? selection.index : 0,
                "image",
                imgUrl
              );
              //插入完成后，光标往后移动一位
              this.$refs.myQuillEditor.quill.setSelection(selection.index + 1);
            }
          });
      };
    },
  },
};
</script>

四、跨域问题
如果没有配置跨域的，页面会报跨域的错误，这也很容易理解，毕竟服务器端的域名和自己跑的域名端口不一致，那此时需要去配置一下
1.现在新版的vue脚手架已经没有vue.config.js这个文件了，如果有就直接在这个文件下配置，没有则在和package.json的同级目录下新增vue.config.js文件

module.exports = {
    
    
    devServer: {
    
    
        open: true, //是否自动弹出浏览器页面
        host: "localhost", 
        port: '8084', 
        proxy: {
    
    
            '/api': {
    
    
                target: 'http://localhost:7001', //API服务器的地址
                changeOrigin: true,
            }
        },
        headers: {
    
    
            'Access-Control-Allow-Origin': '*',
        }
    }
}