vue-quill-editor图片上传到服务器

在使用编辑器中，我们经常会用到上传图片的功能，编辑器默认都是使用base64来处理图片，如果图片过大的话会让base64文件过大，所以需要将图片上传到服务器来解决。

市面上的编辑器很多种，不过处理方式大同小异，这里以vue-quill-editor为例，他是基于 Quill、适用于 Vue 的富文本编辑器。

将富文本封装成一个组件，通过v-model实现数据的双向绑定。

//父组件
<Editor v-model="editorValue" />

接下来就是Editor组件的具体实现逻辑：

二次封装vue-quill-editor

首先得下载相关的依赖包。

npm i vue-quill-editor -S //插件名称
npm i quill-image-extend-module -S //编辑器的增强模块

quill-image-extend-module是quill编辑器的扩展模块，主要提供图片上传到服务器的功能。

<template>
  <quill-editor ref="myTextEditor" v-model="editorValue" :options="editorOption"></quill-editor>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend); //注册扩展模块
export default {
  name: "Editor",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
  },
  components: {
    quillEditor,
  },
  data() {
    return {
      editorValue: "",
      editorOption: {
        placeholder: "编辑文章内容",
        modules: {
          ImageExtend: {
            loading: true,
            name: "image",
            action: process.env.VUE_APP_UPLOAD_LINK, 
            response: (res) => {
              return res.data.file_url;
            },
          },
          toolbar: {
            container: container,
            handlers: {
              image: function () {
                QuillWatch.emit(this.quill.id);
              },
            },
          },
        },
      },
    };
  },
  watch: {
    value: {
      handler(val) {
        this.editorValue = val;
      },
      immediate: true,
    },
    editorValue(val) {
      this.$emit("input", val);
    },
  },
  methods: {
    onEditorChange({ editor, html, text }) {
      this.editorValue = html;
    },
  },
};
</script>

quill-image-extend-module 相关配置

ImageExtend下的action表示服务器地址，因为各环境地址可能不同所以可以通过环境变量进行配置，比如development环境为/api/index/file/upload，以下是quill-image-extend-module 的所有可配置项：

editorOption:{
  modules: {
    ImageExtend: {
      loading: true, // 可选参数 是否显示上传进度和提示语
      name: "img", // 图片参数名
      size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
      action: updateUrl, // 服务器地址, 如果action为空，则采用base64插入图片
      // response 为一个函数用来获取服务器返回的具体图片地址
      // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
      // 则 return res.data.url
      response: (res) => {
        return res.info;
      },
      headers: (xhr) => {}, // 可选参数 设置请求头部
      start: () => {}, // 可选参数 自定义开始上传触发事件
      end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
      error: () => {}, // 可选参数 自定义网络错误触发的事件
      change: (xhr, formData) => {}, // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
    },
    toolbar: {
      container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置
      handlers: {
        image: function () {
          // 劫持原来的图片点击按钮事件
          document.querySelector(".quill-image-input").click();
        },
      },
    },
  },
}

由于不同的用户的服务器返回的数据格式不尽相同，因此在配置中需要return接口返回的图片地址。

// 你必须把返回的数据中所包含的图片地址 return 回去
respnse: (res) => {
  return res.info  // 这里切记要return回你的图片地址
}