Django 抛出 {"non_field_errors":["Invalid data. Expected a dictionary, but got tuple."]} React JS答案

【问题标题】：Django throws {"non_field_errors":["Invalid data. Expected a dictionary, but got tuple."]} React JSDjango 抛出 {"non_field_errors":["Invalid data. Expected a dictionary, but got tuple."]} React JS
【发布时间】：2019-10-11 15:10:39
【问题描述】：

试图通过从 react 到 django rest 的 fetch post 发送文件，但得到了这个 django 响应显示：

{"non_field_errors":["无效数据。需要字典，但得到了元组。"]}

我正在尝试将 pdf 生成的文件发送到 django 但无法执行，首先我创建 pdf 然后通过 fetch post 请求发送

ReactJS

 genPDF=(evt)=>{

    evt.preventDefault();
   html2canvas(document.getElementById("pdfid")).then(canvas=>{
       let img=canvas.toDataURL('img/png');
       let doc=new JsPDF();
       doc.addImage(img,'JPEG',30,30);
       doc.output('blob');
       //doc.save('test.pdf');
       let formdata=new FormData();
       formdata.append('file',doc);

       fetch(`http://127.0.0.1:8000/chauffeur/pdf_upload/`,
           {
               method: 'POST',
               body:formdata,
           }
       ).then(response => response.json()).catch(error => console.error('Error:', error));

       //this.postpdf(formdata)
   });

};

DJANGO

class PdfUpload(APIView):

parser_classes = (MultiPartParser, FormParser,)

def get(self, request):
    return Response([PdfSerializer(file).data for file in Pdf.objects.all()])

def post(self,request):
    payload=(request.data,request.FILES)
    serializer=PdfSerializer(data=payload)

    if serializer.is_valid():
        serializer.save()
        return Response("File Saved in Backend",status=status.HTTP_201_CREATED)
    return Response(serializer.errors,status=status.HTTP_400_BAD_REQUEST)

序列化器.PY

class PdfSerializer(serializers.ModelSerializer):

class Meta:
    model = Pdf
    fields = ['file',]

我是否发送了正确的文件，因为它生成了 PDF，然后我通过 fetch 请求发送它，或者它可能是 formdata 中的问题，因为在 django 端它期望字典但 formdata 充当元组？

【问题讨论】：

django代码哪里抛出了错误？
它实际上给出了回应
您应该使用一些调试技术来找出错误在您的 django 代码中发生的位置。您可以在调试器中运行您的应用，也可以添加 print() 语句。

标签： reactjs django-rest-framework jspdf fetch-api form-data

【解决方案1】：

试试这个：

formdata.append({'file':doc});

代替

formdata.append('file',doc);

【讨论】：