Javascript 未从react钩子窗体上载到后端服务器的文件

嘿，伙计们，我正在学习react，我正在尝试将react钩子表单中的图像上传到django服务器。我在表单中遇到问题，因为文本数据正在传递，但图像没有从表单中发送。我不确定，我写的代码是否正确。有人能检查代码并帮助解决问题吗？我已经与postman一起检查了api端点，它工作正常

形式

导出默认函数postreate（）{
const classes=useStyles（）；
const[postimage，setPostImage]=使用状态（null）；
常数handleChange=（e）=>{
如果（[e.target.name]=“image”）{
设置后期图像({
postimage:e.target.files，
});
console.log（e.target.files）；
}
}
常量{register，handleSubmit，control，errors}=useForm（）；
const onSubmit=（数据）=>{
设formData=new formData（）；
formData.append（'title'，data.title）；
formData.append（'user'，1）；
formData.append（'image'，data.image）；
post（`api/posts/create/`，formData）；
console.log（数据）
} ;
console.log（错误）；
返回(
邮递
形象
创建帖子
);
}

console.log（data）

显示的是

{title:“kjhkdjfnd”}

而不是图像字段。

console.log（data.image）

显示未定义。原因可能是什么

---

感谢

在react hooks表单中，如果您想使用特殊组件，则应使用react hooks表单的控制器组件。你不应该使用不同的状态来保存你的文件

我认为你应该像下面这样在inpus中写你的上传：

import { Controller } from 'react-hook-form';

        <Controller
                control={control}
                render={({ onChange }) => (
                    <FormControl>
                    <Input type="file" onChange={e => onChange(e.target.files[0])} />
                    </FormControl>
                )}
                />;

从'react hook form'导入{Controller}；
(
onChange（e.target.files[0]）}/>
)}
/>;

在react-hooks表单中，如果要使用特殊组件，应使用react-hooks表单的控制器组件。你不应该使用不同的状态来保存你的文件

我认为你应该像下面这样在inpus中写你的上传：

import { Controller } from 'react-hook-form';

        <Controller
                control={control}
                render={({ onChange }) => (
                    <FormControl>
                    <Input type="file" onChange={e => onChange(e.target.files[0])} />
                    </FormControl>
                )}
                />;

从'react hook form'导入{Controller}；
(
onChange（e.target.files[0]）}/>
)}
/>;

在

handleChange

处理程序中，

[e.target.name]==='image'

相当于

['image']=='image'

，它将始终为false，因此图像未设置为状态

const handleChange = (e) => {
    if (e.target.name === "image") {
        setPostImage({
            postimage: e.target.files,
        });
        console.log(e.target.files);
    }
};

---

这应该是可行的。

在

handleChange

处理程序中，

[e.target.name]==='image'

相当于

['image']=='image'

，它将始终为false，因此图像未设置为状态

const handleChange = (e) => {
    if (e.target.name === "image") {
        setPostImage({
            postimage: e.target.files,
        });
        console.log(e.target.files);
    }
};

---

这应该可以工作。

我现在收到此错误`TypeError:无法读取未定义的属性'split'`我现在收到此错误`TypeError:无法读取未定义的属性'split'`