富文本编辑vue-quill-editor上传图片

vue-quill-editor富文本编辑器上传图片默认为base64，存入数据库过于过于庞大，使用quill-image-extend-module+vue-quill-editor实现图片上传。

1. 安装依赖包

npm install vue-quill-editor –save

npm install quill-image-extend-module --save-dev

2.api

// 通用上传请求
export function uploadImage(file) {
    return request({
        url: process.env.BASE_API+'/common/upload.do',
        method: 'post',
        data: file
    })
}

3.引入

import { uploadImage } from "@/api/base";  //上传接口
import { quillEditor, Quill } from 'vue-quill-editor';
import { container, ImageExtend } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

4.注册

components: {
  quillEditor
}

html:

<quill-editor
  v-model="this.text"
  :options="editorOption"
/>
<input type="file" @change="change" id="upload" style="display:none;" />

js

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

  methods: {
    change(e) {
      let file = e.target.files[0]
      const formData = new FormData()
      formData.append('file', file)
      uploadImage(formData)
        .then(res => {
          let quill = this.$refs.quill.quill
          if (res.code === 0) {
            const formdata = _.extend({}, this.formdata)
            let length = quill.getSelection().index//光标位置
            // 插入图片  图片地址
            quill.insertEmbed(length, 'image', data.url)
            // 调整光标到最后
            quill.setSelection(length + 1)//光标后移一位
          }
        })
        .catch(err => {
          console.error(err)
        })
    },
  }

完整代码

<template>
  <div>
    <quill-editor
      v-model="this.text"
      :options="editorOption"
    />
    <input type="file" @change="change" id="upload" style="display:none;" />
  </div>
</template>

<script>
import { uploadImage } from "@/api/base";  //上传接口
import { quillEditor, Quill } from 'vue-quill-editor';
import { container, ImageExtend } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      text: "",
      // 富文本框参数设置
      editorOption: {
        modules: {
          ImageExtend: {
              loading: true,  // 可选参数 是否显示上传进度和提示语
              name: 'img',  // 图片参数名
              size: 3,  // 可选参数 图片大小，单位为M，1M = 1024kb
              action: uploadImage,  // 服务器地址, 如果action为空，则采用base64插入图片
              // response 为一个函数用来获取服务器返回的具体图片地址
              // 例如服务器返回{code: 200; data:{ url: 'xxx.com'}}
              // 则 return res.data.url
              response: (res) => {
                console.log(res);
                return data.url
              },
              headers: (xhr) => {},  // 可选参数 设置请求头部
              start: () => {},  // 可选参数 自定义开始上传触发事件
              end: () => {},  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
              error: () => {},  // 可选参数 自定义网络错误触发的事件
              change: (xhr, formData) => {} // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
          },
          toolbar: {
            container: container,  // container为工具栏，此次引入了全部工具栏，也可自行配置
            handlers: {
              image: function(value) {
                if (value) {
                  document.querySelector('#upload').click()  // 劫持原来的图片点击按钮事件
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    change(e) {
      let file = e.target.files[0]
      const formData = new FormData()
      formData.append('file', file)
      uploadImage(formData)
        .then(res => {
          let quill = this.$refs.quill.quill
          if (res.code === 0) {
            const formdata = _.extend({}, this.formdata)
            let length = quill.getSelection().index//光标位置
            // 插入图片  图片地址
            quill.insertEmbed(length, 'image', data.url)
            // 调整光标到最后
            quill.setSelection(length + 1)//光标后移一位
          }
        })
        .catch(err => {
          console.error(err)
        })
    },
  }
};
</script>

效果如下


参考文章：
https://www.cnblogs.com/dachengzizi/p/11805488.html （请求需要带token可看这篇）
https://segmentfault.com/a/1190000012992461
https://www.cnblogs.com/bingchenzhilu/p/11951571.html
有问题可留言