文件没有从react挂钩表单上传到后端服务器

Question

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

形成

export default function PostCreate() {
const classes = useStyles();
const [postimage, setPostImage] = useState(null);

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

}

const { register, handleSubmit, control, errors } = useForm();
const onSubmit = (data) =>{
let formData = new FormData();
formData.append('title', data.title);
formData.append('user', 1);
formData.append('image', data.image);
axiosInstance.post(`api/posts/create/`, formData);
console.log(data)
} ;
console.log(errors);
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Typography component="h1" variant="h5">
Post!
</Typography>
<form noValidate onSubmit={handleSubmit(onSubmit)}>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
variant="outlined"
fullWidth
id="title"
type="text" 
placeholder="Title"
autoComplete="title" 
name="title" 
inputRef={register({required: true, maxLength: 1000})}
multiline
rows={4}
/>
</Grid>
<label htmlFor="post-image">
<input
accept="image/*"
className={classes.input}
id="post-image"
onChange={handleChange}
name="image"
type="file"
inputRef={register}
/>
Image
<IconButton color="primary" component="span">
<PhotoCamera />
</IconButton>
</label>
</Grid>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
name="button"
>
Create Post
</Button>
</form>
</div>
</Container>
);
}

CCD_ 1示出了CCD_ 2而不是图像场。console.log(data.image)显示未定义。原因是什么？

感谢

Answer 1

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

我认为你应该把上传的内容写在我们下面：

import { Controller } from 'react-hook-form';
<Controller
control={control}
render={({ onChange }) => (
<FormControl>
<Input type="file" onChange={e => onChange(e.target.files[0])} />
</FormControl>
)}
/>;

Answer 2

在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);
}
};

这应该行得通。