Я хочу, чтобы индикатор выполнения в response js обновлялся параллельно при вставке данных в базу данных. Бэкэнд, который я использовал, - это весенняя загрузка, я хочу обновить индикатор выполнения, пока конечная точка с моего контроллера с сервера не отправит статус 200.
Моим требованием было вставить массив объектов в базу данных, скажем более 100 объектов, тем временем индикатор выполнения должен обновляться до тех пор, пока все объекты не будут вставлены в базу данных.
Это мой клиентский код
class UploadMultiPleFiles extends React.Component{
constructor()
{
super();
this.state={
fileArr:[],
progress:0,
}
}
changeFile=(event)=>{
const filedata=event.target.files;
var arr=[];
if(filedata.length!==0)
{
for(let i=0;i<filedata.length;i++)
{
var obj={}
obj.name=filedata[i].name;
obj.type=filedata[i].type;
arr.push(obj);
}
}
this.setState({
fileArr:arr
})
console.log(obj);
console.log(this.state.fileArr)
}
upload=()=>
{
let currentFile=this.state.selectedFiles[0];
this.setState({
progress:0,
currentFile:currentFile,
});
let formData=new FormData();
formData.append("file",currentFile);
}
onFileSubmit=(e)=>{
e.preventDefault();
axios({method:'post',
data: this.state.fileArr,
url:'http://localhost:8080/postList',
onUploadProgress:(ev:ProgressEvent)=>{
const progress=((ev.loaded*100)/ev.total);
this.setState(
{
progress:progress
}
)
console.log(progress)
}
}
).then((res)=>{
console.log(res.status)
})
}
render()
{
return(
<Container>
<h1>Upload Multiple Files</h1>
<Form style={{paddingTop:10}} onSubmit={this.onFileSubmit} className="mt-1">
<Form.Group controlId="formBasicEmail">
<Form.Control type="file" size="lg" name="file" onChange={this.changeFile} multiple/>
</Form.Group>
<Button variant="primary" type="submit">Submit Files</Button>
</Form>
<h4>Files which are uploaded </h4>
<ProgressBar now={this.state.progress}/>
<Table className="mt-1" variant="dark" striped bordered hover size="sm" style={{paddingLeft:100}} >
<thead>
<tr>
<th>File Name</th>
<th>File Type</th>
</tr>
</thead>
<tbody>
{this.state.fileArr.map(c =>
<tr>
<td>{c.name}</td>
<td>{c.type}</td>
</tr>
)}
</tbody>
</Table>
</Container>
);
}
}
Backend-код весной загрузка
@CrossOrigin(origins="http://localhost:3000")
@PostMapping("/postList")
public void pushData(@RequestBody List<FileUpload> fileUploads)
{
opservice.saveAllFiles(fileUploads);
}
}
Класс модели
@Entity
public class FileUpload {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private long id;
private String name;
private String type;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
}