Superagent가 동일한 이미지를 반복적으로 계속 전송합니다.

Question

여러 파일을 업로드하고 Cloudine의 API로 보내려고합니다. 각 이미지를 반복하면서 첨부하고 업로드합니다. 하지만, 내 코드는 이미지를 반복 한 후 파일의 양을 다시 통해 첫 번째 이미지를 업로드 :

let uploadRequest = superagent.post(url) 

    for (let i=0; i<files.length; i++){ 
     uploadRequest.attach('file', files[i]) 
     console.log('file attached', files[i]) 

     Object.keys(params).forEach((key) => { 
      uploadRequest.field(key, params[key]) 
     }) 
     console.log('params attached', files[i]) 

     uploadRequest.then((res) => { 

      console.log('UPLOAD COMPLETE: '+JSON.stringify(res.body)) 
      const uploaded = res.body 
      const imageUrl = res.body.secure_url 
      let updatedArr = this.state.images.slice(); 
      updatedArr.push(imageUrl); 
       this.setState({ 
        images: updatedArr 
       }) 
      }) 

     .catch((error) => { 
      console.log(error) 
      return 
     }) 
    } 

} 

어떻게 내가 원하는 것을 할 그것을 다시 할 수 있습니까? 왜 이런 일이 계속 일어나는지 혼란 스럽습니다.

Answer 1

루프 중간에 비동기 코드를 사용할 수 없습니다. 루프는 요청이 끝나기를 기다리지 않습니다.

모든 기능을 별도의 기능으로 옮긴 다음 루프를 사용하여 해당 기능을 호출하십시오.

var uploadFile = function(file){ 
    //do stuff 
} 

for(var i=0; i<files.length; i++){ 
    uploadFile(files[i]); 
}