为什么我不能在reactjs上传文件

Question

我的文件显示在控制台，但得到一个400错误，即请上传文件。

function AdminPanel() {
const [show, setShow] = useState(false);
const [pdffile, setPdffile] = useState("");
function handleFileChange(e) {
const files = e.target.files[0];
setPdffile(files);
console.log("Guru4666", pdffile);
}
const SubmitPDF = () => {
axios({
method: "post",
url: "url",
data: {"dataFile" : pdffile }
}).then(res => {
console.log("REs", res)
})
}
<div className="form-group form_aside">
<input type="file" className="form-control" id="files"
name="PDF" onChange={handleFileChange} />
</div>

提交控制台结果

Guru4666 
File {
lastModified: 1634196746000
lastModifiedDate: Thu Oct 14 2021 13:02:26 
GMT+0530 (India Standard Time) {}
name: "barkelou.png"size: 5906type: 
"image/png"webkitRelativePath: ""
[[Prototype]]: File}

API的结果是:

dataFile: {}
400

Answer 1

您可能应该使用FormData和multipart/form-data

const SubmitPDF = () => {
const formData = new FormData();
formData.append("dataFile", pdffile);
axios({
method: "post",
url: "url",
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => {
console.log("REs", res)
})