如何解决React-Quill内上传图片不显示、FormData打印为空的问题

问题根因 #

• FormData打印为空：FormData为浏览器内置结构化对象，不支持直接通过console.log打印内部存储的键值对，必须通过formData.get('image')或者遍历formData.entries()才能查看内容。
• 上传后图片不显示：现有逻辑仅完成了本地图片选取、存入FormData的操作，缺少上传图片到服务端获取可访问URL、将URL插入到编辑器光标位置的逻辑，因此编辑器不会渲染选中的图片。

修复后代码 #

import React, { useRef, useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

function Post() {
  const QuillRef = useRef<ReactQuill>(null)
  const [Title, setTitle] = useState("")  
  const [contents, setcontents] = useState("")    

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

    input.onchange = async () => {
      const files = input.files;
      if (!files || files.length === 0) return;
      const formData = new FormData();
      formData.append("image", files[0]);

      // 查看FormData内容的方法
      console.log(formData.get('image')) // 可以打印出选中的文件对象
      // 遍历所有键值对的方法
      for(let [key, value] of formData.entries()) {
        console.log(key, value)
      }

      // 1. 上传图片到服务端
      try {
        const res = await fetch('/api/upload-image', {
          method: 'POST',
          body: formData
        })
        const result = await res.json()
        // 替换为你服务端返回的图片URL字段
        const imageUrl = result.url
        // 2. 将图片插入到Quill编辑器当前光标位置
        const quillEditor = QuillRef.current?.getEditor()
        if (!quillEditor) return
        const range = quillEditor.getSelection()
        if (range) {
          quillEditor.insertEmbed(range.index, 'image', imageUrl)
          // 插入后光标移到图片后面
          quillEditor.setSelection(range.index + 1)
        }
      } catch (err) {
        console.error('图片上传失败', err)
      }
    }
  }

  // Quill配置，替换默认的图片按钮点击事件
  const modules = {
    toolbar: {
      container: [
        [{ 'header': [1, 2, 3, false] }],
        ['bold', 'italic', 'underline', 'strike'],
        ['image', 'link']
        // 可以自行补充需要的工具栏按钮
      ],
      handlers: {
        image: imageHandler
      }
    }
  }

  const formats = [
    'header', 'bold', 'italic', 'underline', 'strike', 'image', 'link'
  ]

  const titleHandler = (e : React.ChangeEvent<HTMLTextAreaElement>) => {
      e.preventDefault()
      setTitle(e.currentTarget.value)
  }


  return (
    <div className="post">
        <ReactQuill
        style = {{height : "650px", marginBottom: '50px'}}
          ref = {QuillRef}
          value = {contents || ""}
          onChange = {(content, delta, source, editor) => setcontents(editor.getHTML())}
          modules = {modules}
          formats = {formats}
          theme = "snow"
          placeholder = "내용을 입력해주세요"/>
    </div>
  );
}

export default Post;

注意事项 #

• 替换代码中的/api/upload-image为你实际的服务端图片上传接口地址
• 根据你服务端的返回结构调整imageUrl的取值逻辑
• 确保服务端返回的图片URL支持跨域访问，否则编辑器会因跨域限制无法加载图片

内容的提问来源于stack exchange，提问作者sunpl13