nuxt vue-quill-editor elementui上传组件自定义图片上传操作

首先，你需要在 vue-quill-editor 组件的配置项中添加一个自定义的图片上传方法。你可以使用 element-ui 的上传组件来实现上传操作。

在 vue-quill-editor 组件中添加如下配置项：

<template>
  <quill-editor
    ...
    :options="editorOption"
  />
</template>

<script>
import { Upload } from 'element-ui';

export default {
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: {
            ...
            handlers: {
              image: this.customImageHandler
            }
          }
        }
      }
    }
  },
  methods: {
    customImageHandler() {
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');
      input.onchange = () => {
        const file = input.files[0];
        const formData = new FormData();
        formData.append('file', file);
        Upload.request({
          url: 'your-upload-api-url',
          method: 'post',
          data: formData,
          headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token') // 如果需要携带认证信息
          }
        }).then(res => {
          const url = res.data.url; // 根据你的上传 API 返回的数据结构获取图片 URL
          const quill = this.$refs.quillEditor.quill;
          const range = quill.getSelection(true);
          quill.insertEmbed(range.index, 'image', url);
          quill.setSelection(range.index + 1);
        });
      };
      input.click();
    }
  }
}
</script>

在上述代码中，我们使用 `handlers` 配置项来添加自定义的图片上传操作，即 `customImageHandler` 方法。该方法会创建一个 `input` 标签来触发文件选择框，用户选择图片后，使用 element-ui 的上传组件来上传图片，并根据上传结果在编辑器中插入图片。

需要注意的是，你需要根据你的实际情况修改上传 API 的 URL，以及上传成功后返回的图片 URL 在响应数据中的字段名。另外，如果你的上传 API 需要携带认证信息，可以在请求头中添加相应的信息。