Django Rest Framework+React JS，无法实现表单解析器（错误：提交的数据不是文件。检查表单上的编码类型。）答案

【问题标题】：Django Rest Framework+React JS ,unable to implement form parser (error: The submitted data was not a file. Check the encoding type on the form.)Django Rest Framework+React JS，无法实现表单解析器（错误：提交的数据不是文件。检查表单上的编码类型。）
【发布时间】：2020-08-30 04:05:14
【问题描述】：

当我从带有图像的反应前端提交表单时，服务器响应 "The submitted data was not a file. Check the encoding type on the form."。当我使用 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 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>)

【问题讨论】：

标签： javascript python django reactjs django-rest-framework

【解决方案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

【讨论】：