通过axios从一个表单react js上传多个文件

Question

我正在尝试做多个文件上传，我现在只能做一个文件，我怎么能从不同的输入字段上传3个文件

import React from "react";
import axios, { post } from "axios";
;
import moment from "moment";
import "./calendar.css";
export default class Dashboard extends React.Component {
constructor(props) {
super(props);

this.state = {



image_file: null,
image_preview: "",
file: null,
};
this.onsubmbit = this.onsubmbit.bind(this);
this.onChange = this.onChange.bind(this);

}
changeHandler = (e) => {
this.setState({
allValues: { ...this.state.allValues, [e.target.name]: e.target.value },
});
};
onChange(e) {

console.log(e.target.files[0]);

let image_as_files = e.target.files[0];
this.setState({

image_file: image_as_files,
});
}

onsubmbit = (e) => {
e.preventDefault();
if (this.state.image_file !== null) {
let formData = new FormData();
formData.append("scanReport", this.state.image_file);

axios
.post(
"url/",
formData,
{
headers: {
Authorization: `token ` + localStorage.getItem("token"),
"Content-type": "multipart/form-data",
},
}
)
.then((res) => {
console.log(`Success` + res.data);
})
.catch((err) => {
console.log(err);
});
}
};



render() {
return (
<>

<form onSubmit={this.onsubmbit}>
<div className="module-wrap" style={styles.module}>

<h4>Upload Scan Report</h4>
<input
type="file"
id="file"
name="ScanReport"
// accept="application/pdf"
onChange={this.onChange}
value={this.state.allValues.ScanReport}
/>
<h4>Upload Blood Report</h4>
<input
type="file"
name="BloodReport"
onChange={this.onChange}
value={this.state.allValues.BloodReport}
/>
<h4>Upload Antenatal Charts</h4>
<input
type="file"
name="AntenatalCharts"
onChange={this.onChange}
value={this.state.allValues.AntenatalCharts}
/>
<h4>Enter Today BP</h4>
<input
type="text"
name="bp"
onChange={this.changeHandler}
value={this.state.allValues.bp}
/>
<h4>Enter Todays Weight</h4>
<input
type="text"
name="Weight"
onChange={this.changeHandler}
value={this.state.allValues.Weight}
/>
</div>
<br />
<div>
<button type="submit" style={styles.sbtn}>
Submit
</button>
</div>
</div>
</form>

</>
);
}
}

我试图做多个文件上传我现在只能做一个文件，我怎么能从不同的输入字段上传3个文件我正在尝试做多个文件上传我现在只能做一个文件我怎么能从不同的输入字段上传3个文件

Answer 1

如果我理解正确，您已经为一个文件(ScanReport)工作了，因此您需要做的就是更新您的onChange方法，以了解输入name属性以支持多个文件输入。然后相应地更新你的类状态。

因此你的状态应该看起来像这样:

this.state = {
allValues: {
AppointmentDate: "",
Date: "",
ScanDate: "",
question: "",
ScanReport: "",
BloodReport: "",
AntenatalCharts: "",
Weight: "",
},
files: {
ScanReport: null, // <- these keys should match the 'name' of the inputs
BloodReport: null,
AntenatalCharts: null
},
image_preview: "",
file: null,
}

然后更新你的onChange使用name属性来设置它:

onChange(e) {
let files = this.state.files
files[e.target.name] = e.target.files[0]
this.setState({  
files: files
});
}

最后，当你构造FormData时，你可以在表单数据中添加每个具有所需字段名的单独文件:

let formData = new FormData();
// EDIT: added logic to handle null files
if (this.state.files.ScanReport != null) {
formData.append("scanReport", this.state.files.ScanReport);
}
if (this.state.files.BloodReport != null) {
formData.append("bloodReport", this.state.files.BloodReport);
}
if (this.state.files.AntenatalCharts != null) {
formData.append("antenatalCharts", this.state.files.AntenatalCharts);
}
...