vue-quill-editor 图片上传配置

你可以使用 vue-quill-editor 来实现富文本编辑器，并配置图片上传功能。下面是一个简单的配置示例：

1. 安装依赖：

npm install vue-quill-editor

2. 在 Vue 组件中引入和使用 vue-quill-editor：

<template>
  <div>
    <quill-editor v-model="editorContent" :options="editorOptions"></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor';

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      editorContent: '',
      editorOptions: {
        // 配置富文本编辑器的选项
        modules: {
          toolbar: [
            [{ header: [1, 2, false] }],
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 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: [] }],
            ['link', 'image', 'video', 'formula'],
            ['clean'],
          ],
          // 配置图片上传的选项
          clipboard: {
            matchVisual: false,
          },
          image: {
            uploadURL: '/upload', // 图片上传的接口地址
            method: 'POST', // 图片上传的请求方法
            name: 'image', // 图片上传字段的名称
            withCredentials: false, // 是否携带凭证
            headers: {}, // 请求头部信息
            // 自定义上传函数，返回 Promise 对象
            customUploader: function (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('上传失败');
                  });
              });
            },
          },
        },
      },
    };
  },
};
</script>

在上述代码中，你需要根据你自己的需求配置富文本编辑器的选项和图片上传的选项。其中，`uploadURL` 是图片上传的接口地址，`customUploader` 是自定义的图片上传函数，你可以在该函数中调用你的图片上传接口。

这样，当用户在富文本编辑器中插入图片时，会自动调用图片上传函数将图片上传到服务器，并将上传成功后的图片链接插入到编辑器中。

希望能对你有所帮助！如有任何疑问，请随时提问。