Javascript Django Rest框架&x2B；React JS，无法实现表单解析器（错误：提交的数据不是文件。请检查表单上的编码类型。）

当我从react frontend with images服务器提交表单时，服务器响应

“提交的数据不是文件。请检查表单上的编码类型。”

。当我使用Django RF可浏览API时，我可以成功地添加图像。这会是前端的问题吗

VIEWS.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和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>)

const[image，setImage]=useState（null）
常量handlesubmit=（）=>{
让endpoint=`/api/post/`；
apiService（端点，'POST'，{title:title，body:body，pic:image}）
console.log（数据））}；
return（setImage（e.target.files[0]）}/>
上传）

找到了答案

从“React”导入React，{useState}
函数Addpost（）{
const[title，setTitle]=useState（'dfv'）
const[body，setBody]=useState（'vdfvdfd'）
const[picture，setPicture]=useState（null）；
常量handlesubmit=（e）=>{
e、 预防默认值（）；
设form_data=new FormData（）；
表格\数据。附加（'pic'，picture，picture.name）；
表格_数据。附加（“标题”，标题）；
表格_数据。追加（'正文'，正文）；
让url='/api/post/'；
axios.post（url、表单数据、{
标题：{
“内容类型”：“多部分/表单数据”，
“X-CSRFTOKEN”：CSRF\U令牌
}
})。然后（res=>{
console.log（res.data）；
}).catch（err=>console.log（err））
};
返回(
增加新员额
setTitle（e.target.value）}多行全宽id=“轮廓基本”label=“Post Title”variant=“轮廓”/>
setBody（e.target.value）}多行全宽id=“概述的基本”label=“Post Body”variant=“概述的”/>
上传图像
{setPicture（e.target.files[0]）}/>
)
}
导出默认Addpost

找到了答案

从“React”导入React，{useState}
函数Addpost（）{
const[title，setTitle]=useState（'dfv'）
const[body，setBody]=useState（'vdfvdfd'）
const[picture，setPicture]=useState（null）；
常量handlesubmit=（e）=>{
e、 预防默认值（）；
设form_data=new FormData（）；
表格\数据。附加（'pic'，picture，picture.name）；
表格_数据。附加（“标题”，标题）；
表格_数据。追加（'正文'，正文）；
让url='/api/post/'；
axios.post（url、表单数据、{
标题：{
“内容类型”：“多部分/表单数据”，
“X-CSRFTOKEN”：CSRF\U令牌
}
})。然后（res=>{
console.log（res.data）；
}).catch（err=>console.log（err））
};
返回(
增加新员额
setTitle（e.target.value）}多行全宽id=“轮廓基本”label=“Post Title”variant=“轮廓”/>
setBody（e.target.value）}多行全宽id=“概述的基本”label=“Post Body”variant=“概述的”/>
上传图像
{setPicture（e.target.files[0]）}/>
)
}
导出默认Addpost

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