Quill 如何实现图片上传到服务端

Quill 富文本编辑器可以选择图片，但是只是在编辑器里显示了图片预览，不会真实上传到服务器。Quill 本身并不直接处理图片上传，但它提供了灵活的 API，允许你自定义图片上传逻辑。以下是两个常用的方法和示例代码，帮助你在 Quill 中实现图片上传功能：

自定义图片上传处理程序

你可以使用 Quill 的 imageHandler 选项，自定义图片上传的处理程序。在处理程序中，你可以获取用户选择的图片文件，并将其上传到服务器。上传成功后，你可以将图片的 URL 插入到 Quill 编辑器中。下面是一个自定义图片上传的示例代码：

var quill = new Quill('#editor', {
  modules: {
    toolbar: {
      handlers: {
        image: imageHandler,
      },
    },
  },
});

function imageHandler() {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  input.click();

  input.onchange = () => {
    const file = input.files[0];

    // 将图片上传到服务器
    uploadImage(file)
      .then((imageUrl) => {
        // 将图片 URL 插入到编辑器中
        const range = quill.getSelection();
        quill.insertEmbed(range.index, 'image', imageUrl);
      })
      .catch((error) => {
        console.error('图片上传失败：', error);
      });
  };
}

function uploadImage(file) {
  return new Promise((resolve, reject) => {
    const formData = new FormData();
    formData.append('image', file);

    fetch('/upload', {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        if (data.success) {
          resolve(data.imageUrl);
        } else {
          reject(data.error);
        }
      })
      .catch((error) => {
        reject(error);
      });
  });
}

在这个例子中，imageHandler 函数创建了一个文件输入元素，并监听 onchange 事件。当用户选择图片后，它调用 uploadImage 函数将图片上传到服务器。上传成功后，它将图片的 URL 插入到编辑器中。

使用 Quill 的 imageDropAndPaste 模块

Quill 的 imageDropAndPaste 模块允许用户通过拖放或粘贴的方式插入图片。你可以使用 imageDropAndPaste 模块的 handler 选项，自定义图片上传的处理程序。

var quill = new Quill('#editor', {
  modules: {
    toolbar: true,
    imageDropAndPaste: {
      handler: imageHandler,
    },
  },
});

function imageHandler(imageDataUrl, type, callback) {
  // 将图片上传到服务器
  uploadImage(imageDataUrl)
    .then((imageUrl) => {
      // 将图片 URL 插入到编辑器中
      callback(imageUrl);
    })
    .catch((error) => {
      console.error('图片上传失败：', error);
    });
}

function uploadImage(imageDataUrl) {
  return new Promise((resolve, reject) => {
    fetch('/upload', {
      method: 'POST',
      body: imageDataUrl,
    })
      .then((response) => response.json())
      .then((data) => {
        if (data.success) {
          resolve(data.imageUrl);
        } else {
          reject(data.error);
        }
      })
      .catch((error) => {
        reject(error);
      });
  });
}

在这个例子中，imageHandler 函数接收 imageDataUrl、type 和 callback 参数。它将图片上传到服务器，并在上传成功后调用 callback 函数，将图片 URL 传递给 Quill。

上传图片注意事项