我正在使用 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,它会显示为一个空对象。