vue-quill-editor上传图片

vue-quill-editor是一个基于Quill.js的富文本编辑器，它支持上传图片，以下是上传图片的步骤：

1. 安装依赖

npm install quill-image-resize-module --save
npm install quill --save
npm install vue-quill-editor --save

2. 引入依赖

import { quillEditor } from 'vue-quill-editor'
import Quill from 'quill'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)

3. 配置vue-quill-editor

<template>
  <quill-editor v-model="content" :options="editorOption"></quill-editor>
</template>

<script>
export default {
  data () {
    return {
      content: '',
      editorOption: {
        modules: {
          imageResize: {
            displaySize: true
          },
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            ['image', 'code-block', 'link']
          ]
        },
        placeholder: '请输入内容'
      }
    }
  }
}
</script>

4. 添加上传图片功能

<template>
  <quill-editor v-model="content" :options="editorOption" ref="myQuillEditor"></quill-editor>
  <input type="file" @change="uploadImage" ref="fileInput" style="display:none">
</template>

<script>
export default {
  data () {
    return {
      content: '',
      editorOption: {
        modules: {
          imageResize: {
            displaySize: true
          },
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            ['image', 'code-block', 'link']
          ]
        },
        placeholder: '请输入内容'
      },
      imageSrc: ''
    }
  },
  methods: {
    uploadImage() {
      const file = this.$refs.fileInput.files[0]
      const formData = new FormData()
      formData.append('image', file)
      axios.post('/api/uploadImage', formData).then(res => {
        if (res.data.status === 'success') {
          const range = this.$refs.myQuillEditor.quill.getSelection()
          const imgSrc = res.data.data.imageSrc
          this.$refs.myQuillEditor.quill.insertEmbed(range.index, 'image', imgSrc)
          this.$refs.fileInput.value = ''
        }
      })
    }
  }
}
</script>

5. 其中，`uploadImage`方法用于上传图片，并将图片插入到编辑器中。

注意：要将`image`添加到`toolbar`中，以便能够在编辑器中添加图片。

['image', 'code-block', 'link']