如何从e.target获取图像.文件[0]通过输入id，这样我就可以设置图像的状态，然后通过axios发布

Question

我一直在尝试获取每个id的文件并更新图像的状态，但我可以选择带有id的图像，请告诉我如何根据id选择文件并更新相关状态。提前谢谢。

export class KycForm extends React.Component {
state = {
adhar_front: undefined,
adhar_back: undefined,
avatar: undefined,
passbook: undefined,
driving_license: undefined,
pan_card: undefined
};
handleImageChange = (e) => {
console.log(e.target.files[0])
}
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state);
console.log(this.state.images)
let form_data = new FormData();
for (let i = 0; i < this.state.images.length; i++) {
form_data.append('this is imput file', this.state.images[i], this.state.images[i].name)
};
console.log("fORM DTATA APPENDED: " + form_data)
this.props.createUserKyc(form_data)
};
render() {
return (
<div className="col-md-6 m-auto">
<div className="card card-body mt-5">
<h2 className="text-center">Complete Your KYC</h2>
<form onSubmit={this.handleSubmit} encType="multipart/form-data">
<div className="form-group">
<label>Adhar Front</label>
<input
accept="image/png, image/jpeg"
className="form-control"
name="adhar_front"
onChange={this.handleImageChange}
required
type="file"
/>
</div>
<button>Upload</button>
</form>
</div>
</div>
);
}
}

Answer 1

首先你应该将multiple添加到你的输入中，然后你可以上传一些文件，并像我在下面所做的那样上传它们

class App extends React.Component {
render() {
return (
<div className="App">
<KycForm />
</div>
);
}
}
class KycForm extends React.Component {
state = {
adhar_front: undefined,
adhar_back: undefined,
avatar: undefined,
passbook: undefined,
driving_license: undefined,
pan_card: undefined,
images: []
};
handleImageChange = (e) => {
const copy = { ...this.state };
for (var i = 0; i < e.target.files.length; i++) {
copy.images.push(e.target.files[i]);
}
this.setState(copy);
};
handleSubmit = (e) => {
e.preventDefault();
let form_data = new FormData();
form_data.append("images", this.state.images);
console.log("images.length: ", this.state.images.length);
//you can send form_data to server
};
render() {
return (
<div className="col-md-6 m-auto">
<div className="card card-body mt-5">
<h2 className="text-center">Complete Your KYC</h2>
<form onSubmit={this.handleSubmit} encType="multipart/form-data">
<div className="form-group">
<label>Adhar Front</label>
<input
multiple
accept="image/png, image/jpeg"
className="form-control"
name="adhar_front"
onChange={this.handleImageChange}
required
type="file"
/>
</div>
<button>Upload</button>
</form>
</div>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>