尝试将生成的 PDF 文件从 React Js 发送到 Django-Rest Post 请求时，未提交任何文件

No file was submitted when try to send generated PDF file from React Js to Django-Rest Post request

提问人：Muhammad Nabeel 提问时间：4/9/2019 最后编辑：Muhammad Nabeel 更新时间：4/10/2019 访问量：803

问：

尝试在 react js 中生成 pdf 文件，然后将其发送到 django rest 后端。

我已经使用 jsPDF 和 html2canvas 成功创建了 pdf 文件，但现在无法发送到 rest api，每当我提交它时，它都会给我响应“没有提交文件”。我已经检查了 django-rest api 及其工作正常，pdf 不会转到 rest api。这是我的以下代码：

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.save('test.pdf');
       let file=doc;
       const formdata=new FormData();
       formdata.append("file",file);
       this.postpdf(formdata)
   });

};

postpdf=(payload)=>{

    fetch(`http://127.0.0.1:8000/chauffeur/pdf_upload/`,
        {
            method: 'POST',
            body: JSON.stringify(payload),
            headers: {
                'Content-Type': 'application/json'
            }
        }
    ).then(response => response.json()).catch(error => console.error('Error:', error));
};

请求标头

       Content-Type: multipart/form-data; boundary=----                       
       WebKitFormBoundaryEueEwtpzbquHU6Tb
       Origin: http://localhost:3000
       Referer: http://localhost:3000/contractinvoice
       User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
       Chrome/73.0.3683.86 Safari/537.36

响应标头

       Access-Control-Allow-Credentials: true
       Access-Control-Allow-Origin: http://localhost:3000
       Allow: GET, POST, HEAD, OPTIONS
       Content-Length: 76
       Content-Type: application/json
       Date: Wed, 10 Apr 2019 05:44:49 GMT
       Server: WSGIServer/0.2 CPython/3.5.2
       Vary: Accept, Cookie, Origin
       X-Frame-Options: SAMEORIGIN

我认为我发送的文件是错误的，但无法对它进行排序，有什么问题，需要建议。谢谢

javascript 反应js django-rest-framework jspdf html2canvas

评论

0赞 Monarch Maisuriya 3/14/2021
嘿，我也有类似的情况，我还没有想出解决方案。想知道你是否这样做了？请让我知道

答：

0赞 sathish kumar 4/9/2019 #1

为什么要将有效负载转换为 JSON.stringify（）...有效负载不是 JSON... 试试这个...

postpdf=(payload)=>{

    fetch(`http://127.0.0.1:8000/chauffeur/pdf_upload/`,
        {
            method: 'POST',
            body: payload,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }
    ).then(response => response.json()).catch(error => console.error('Error:', error));
};

评论

0赞 Muhammad Nabeel 4/10/2019
在我的问题中添加请检查。
1赞 Uladzislau Ulasenka 4/9/2019 #2

您在这里有错误：

'Content-Type': 'application/json'

如果要发送文件，则应使用 multipart/form-data

上一个：Django 管理员错误“请更正以下错误。

下一个：如何在 reactjs 中手动编辑表格和表格标题的行