Django Rest Framework+React JS，无法实现表单解析器(错误:提交的数据不是文件.检查表单上的

Question

当我从带有图像的反应前端提交表单时，服务器响应"The submitted data was not a file. Check the encoding type on the form."。当我使用 Django RF 可浏览 API 时，我可以成功添加图像。那么这会是前端的问题吗？

视图。.PY

class PostListCreateview(generics.ListCreateAPIView):
queryset = Post.objects.all().order_by('id')
serializer_class = PostSerializer
permission_classes = [permissions.IsAuthenticatedOrReadOnly]
parser_class = (FileUploadParser,)
def perform_create(self, serializer):
serializer.save(author=self.request.user)

Post模型接受title,body and pic作为来自POST方法的参数。

反应前端

const [image,setImage] = useState(null)
const handlesubmit =()=>{
let endpoint = `/api/post/`;
apiService(endpoint,'POST',{title:title,body:body,pic:image}).then(data=>
console.log(data))};
return (<input type="file"  onChange={(e)=>setImage(e.target.files[0])}/>
<Button onClick={handlesubmit} >Upload</Button>)

Answer 1

找到了答案，https://medium.com/@emeruchecole9/uploading-images-to-rest-api-backend-in-react-js-b931376b5833

import React,{useState} from 'react'
function Addpost() {
const [title,setTitle] = useState('dfv')
const [body,setBody] = useState('vdfvdfd')
const [picture, setPicture] = useState(null);

const handlesubmit = (e)=>{
e.preventDefault();
let form_data = new FormData();
form_data.append('pic', picture, picture.name);
form_data.append('title', title);
form_data.append('body', body);
let url = '/api/post/';
axios.post(url, form_data, {
headers: {
'content-type': 'multipart/form-data',
'X-CSRFTOKEN': CSRF_TOKEN
}
}).then(res => {
console.log(res.data);
}).catch(err => console.log(err))
};


return (
<Grid container spacing={6} justify="center" alignItems="center" direction="row" style={{marginTop:'3'}}>
<Grid item lg={8} xs={11}>
<Typography>Add new posts </Typography>
<form  onSubmit={handlesubmit} >
<TextField style={{margin:'5px'}} value={title} onChange={(e)=>setTitle(e.target.value)} multiline  fullWidth id="outlined-basic" label="Post Title" variant="outlined" />
<TextField style={{margin:'5px'}} value={body} onChange={(e)=>setBody(e.target.value)} multiline fullWidth id="outlined-basic" label="Post Body" variant="outlined" />
<Grid item xs={11} lg={8} style={{margin:'5px'}} >
<Typography color="primary">Upload an Image </Typography>
<input type="file" accept="image/png, image/jpeg"  onChange={(e)=>{setPicture(e.target.files[0])}}  />
<input type="submit"/>
</Grid>
</form>
</Grid>

</Grid>
)
}
export default Addpost