我是 Reactjs 新手。我正在使用环回存储连接器来存储图像/文件。现在我的问题是使用上传多个文件formData()
my code
constructor(props){
super(props);
this.state = {
car_photo : [],
Car_Image : []
}
}
fileUploadCarImg = ()=> {
const fd = new FormData();
this.state.Car_Image.forEach((item , i) => {
fd.append('image2',this.state.Car_Image, this.state.Car_Image.name )
});
axios.post('http://localhost:3000/api/attachmentBanks/Car_Image/upload',fd , {
onUploadProgress : ProgressEvent => {
console.log('Upload Progress: ' + Math.round(ProgressEvent.loaded / ProgressEvent.total *100) + '%')
}
})
.then(res => {
this.setState({
car_photo: res.data.result.files.image2[0].name,
});
});
}
fileSelectedCarImg = event =>{
console.log(Array.from(event.target))
this.setState({
Car_Image: Array.from(event.target.files[0])
})
}
我的输入字段是
<FormGroup>
<span>Car Image</span>
<input style={{display :'none'}} type="file" onChange={this.fileSelectedCarImg} ref={fileInput3 => this.fileInput3 = fileInput3 } required multiple />
<Button onClick={()=>this.fileInput3.click()} ><Icon type="upload" />Choose Image
</Button>
<Button onClick={this.fileUploadCarImg}> upload </Button>
</FormGroup>
使用此代码时Upload Progress: 100%
在控制台中打印,但文件没有进入文件夹。
请任何人帮忙
我找到了工作代码
fileSelectedCarImg = event =>{
const file = Array.from(event.target.files);
this.setState({ file })
}
fileUploadCarImg =()=>{
for (let index = 0; index < this.state.file.length; index++) {
const element = this.state.file[index];
const fd = new FormData();
fd.append('image2',element,element.name )
axios.post('http://localhost:3000/api/attachmentBanks/Car_Image/upload',fd , {
onUploadProgress : ProgressEvent => {
console.log('Upload Progress: ' + Math.round(ProgressEvent.loaded / ProgressEvent.total *100) + '%')
}
})
.then(res => {
this.setState({
car_photo: res.data.result.files.image2[0].name,
});
});
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)