vue-quill-editor vue3图片上传

以下是使用vue-quill-editor在vue3中实现图片上传的方法：

1.首先，安装vue-quill-editor和quill-image-resize-module：

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

2.在Vue组件中引入vue-quill-editor和quill-image-resize-module：

import { quillEditor } from 'vue-quill-editor'
import Quill from 'quill'
import ImageResize from 'quill-image-resize-module'

Quill.register('modules/imageResize', ImageResize)

3.在Vue组件中使用vue-quill-editor，并配置相关参数：

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

<script>
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['clean'],
            ['link', 'image', 'video']
          ],
          imageResize: {
            displaySize: true
          }
        }
      }
    }
  }
}
</script>

4.在Vue组件中添加上传图片的方法：

methods: {
  uploadImage(file) {
    return new Promise((resolve, reject) => {
      const formData = new FormData()
      formData.append('file', file)
      axios.post('/upload', formData).then(response => {
        resolve(response.data.url)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

5.在Vue组件中配置上传图片的参数：

editorOption: {
  modules: {
    toolbar: [
      // ...
    ],
    imageResize: {
      displaySize: true
    },
    // 添加以下代码
    imageDrop: true,
    imageUpload: {
      url: '/upload',
      method: 'POST',
      name: 'file',
      withCredentials: true,
      headers: {
        'X-CSRF-Token': '1234567890' // 可选参数，如果需要可以添加
      },
      callbackOK: (serverResponse, next) => {
        next(serverResponse.url)
      },
      callbackKO: (serverError) => {
        console.log(serverError)
      },
      checkBeforeSend: (file, next) => {
        console.log(file)
        next(file) // 必须调用next()方法
      }
    }
  }
}

6.最后，在服务器端实现图片上传的接口即可。