Quill+ASP.NET Core实现图片上传

Quill 是一个免费开源的富文本编辑器，旨在为现代 Web 提供强大的编辑功能，具有模块化架构和丰富的 API，便于开发者根据需求进行定制。默认情况下，Quill 支持将图片以 Base64 编码的形式嵌入内容中，但这在处理大量或高分辨率图片时可能导致性能问题。为了解决这个问题，你可以自定义图片处理逻辑，将图片上传到服务器，并在编辑器中插入返回的图片 URL。

Quill 官网：https://quilljs.com/

Quill+ASP.NET Core实现图片上传

本文介绍了如何在ASP.NET Core网站项目中，实现 Quill 图片上传的功能。

1. 集成 Quill 编辑器

首先，在你的 ASP.NET 项目中引入 Quill 编辑器。你可以通过 CDN 引入所需的 CSS 和 JavaScript 文件：

<!-- 引入 Quill 的 CSS 文件 -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- 创建编辑器容器 -->
<div id="editor"></div>

<!-- 引入 Quill 的 JavaScript 文件 -->
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<!-- 初始化 Quill 编辑器 -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

2. 自定义图片上传的处理程序

可以使用 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);
      });
  });
}

3. 实现服务器端图片上传接口

在服务器端（例如 ASP.NET Core 控制器），创建一个处理图片上传的端点。该端点接收上传的图片文件，保存到服务器，并返回图片的访问 URL。

[HttpPost]
[Route("your-upload-endpoint")]
public async Task<IActionResult> UploadImage(IFormFile image)
{
    if (image == null || image.Length == 0)
    {
        return Json(new { success = false, message = "未选择文件" });
    }

    var uploadsFolder = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads");
    if (!Directory.Exists(uploadsFolder))
    {
        Directory.CreateDirectory(uploadsFolder);
    }

    var uniqueFileName = Guid.NewGuid().ToString() + "_" + image.FileName;
    var filePath = Path.Combine(uploadsFolder, uniqueFileName);

    using (var fileStream = new FileStream(filePath, FileMode.Create))
    {
        await image.CopyToAsync(fileStream);
    }

    var imageUrl = Url.Content("~/uploads/" + uniqueFileName);
    return Json(new { success = true, imageUrl });
}

注意事项

安全性：确保在服务器端对上传的文件进行验证，例如检查文件类型和大小，以防止恶意文件上传。
存储位置：根据需求选择合适的存储方案，例如将图片保存到本地服务器、云存储或内容分发网络（CDN）。
错误处理：在客户端和服务器端都应添加适当的错误处理逻辑，以提升用户体验。

通过上述步骤，你可以在 ASP.NET 项目中成功集成 Quill 编辑器的图片上传功能，实现更丰富的文本编辑体验。