React生成PDF上传至Django REST报错：No file was submitted

你遇到的核心问题是文件上传的格式处理错误，导致后端无法识别你发送的PDF文件。我们一步步来修正：

关键错误分析 #

1. 错误的FormData处理：你把FormData用JSON.stringify()转成了JSON字符串，但FormData是专门用于表单/文件上传的特殊对象，转成JSON后会丢失文件数据，后端自然接收不到。
2. 错误的Content-Type设置：你手动设置了Content-Type: application/json，但文件上传需要用multipart/form-data格式。当你传递FormData作为请求体时，浏览器会自动生成正确的Content-Type（包括boundary），手动设置反而会破坏这个过程。
3. 未将jsPDF实例转为可识别的文件类型：直接把jsPDF的doc对象添加到FormData是无效的，后端无法识别这个对象，需要先把它转成Blob或File类型。

修改后的代码 #

1. 修正PDF生成并转为File对象 #

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); 

    // 关键：将jsPDF生成的内容转为Blob，再包装成File对象
    const pdfBlob = doc.output('blob');
    const file = new File([pdfBlob], 'test.pdf', { type: 'application/pdf' });

    const formdata=new FormData(); 
    formdata.append("file", file); 
    this.postpdf(formdata); 
  }); 
}; 

2. 修正fetch请求 #

postpdf=(payload)=>{ 
  fetch(`http://127.0.0.1:8000/chauffeur/pdf_upload/`, { 
    method: 'POST', 
    body: payload, // 直接传递FormData，不要转JSON
    credentials: 'include' // 对应响应头的Access-Control-Allow-Credentials: true，确保携带cookie
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log('上传成功:', data))
  .catch(error => console.error('上传失败:', error)); 
};

额外验证点 #

• 后端Django视图中，确保使用request.FILES.get('file')来获取上传的文件，而不是request.data（文件会被存在FILES对象里）。
• 可以在前端控制台用console.log(formdata.get('file'))确认是否成功添加了File对象。

这样修改后，你的PDF文件应该就能正确被后端接收了。

内容的提问来源于stack exchange，提问作者Muhammad Nabeel