0

我正在使用 React-Quill 制作一个简单的公告板。我正在实现通信并将内容值保存到服务器,但是在上传图像时,出现图像未显示在内容中的错误,因此无法解决。

我该如何解决这个问题?

function Post() {

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

  const imageHandler = () => {
    const input = document.createElement("input");
    const formData = new FormData();


    input.setAttribute("type", "file");
    input.setAttribute("accept", "image/*");
    input.click();

    input.onchange = async () => {
      const file : any = input.files;
      if (file !== null) {
        formData.append("image", file[0]);

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


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

export default Post;

如果您使用 Console.log 检查 FormData,它会显示为一个空对象。

4

0 回答 0