React JS 파일 업로드

Question

단일 이미지 파일을 업로드하고 해당 경로를 데이터베이스에 저장하려고합니다. 그러나 업로드 된 이미지 (앱의 상태에 저장되는 세부 정보)를 보내려고하면 전송 된 이미지와 관련하여 요청의 페이로드가 비어 있습니다.

onDrop(picture) { 
     this.setState({ 
      images: this.state.images.concat(picture) 
     }); 
    } 

그리고 handleSubmit :이 t는

handleSubmit(event) { 
    event.preventDefault(); 
    console.log(this.state.images) // at this point, the list of files is populated, as present in the image below. 
    axios.post('http://127.0.0.1/scoala-de-iarna/api/web/api/create-sponsor', { 
     name: this.state.name, 
     images: this.state.images 
    }); 
} 

입니다

renderForm() { 
     return (
      <div> 
       <form onSubmit={ this.handleSubmit }> 
        <div className="uniform"> 
         <div className="12u 12u%(medium)"> 
          <ImageUploader 
           withIcon={ true } 
           buttonText='Upload' 
           onChange={ this.onDrop } 
           imgExtension={ ['.jpg', '.png'] } 
           maxFileSize={ 6291456 } 
          /> 
         </div> 
        </div> 
       </form> 
       <input /*onClick={ this.handleSubmit }*/ type="submit" value="Submit" /> 
      </div> 
     ); 
    } 

가 여기 내 onDrop 핸들러입니다 : 여기

내 구성 요소의 그는 파일 - 업로드 될 목록입니다.

이

요청의 데이터입니다.

업데이트 - 행동 폴더에 createSponsor 기능 :

export function createSponsor(values) { 
    return async (dispatch, getState) => { 
     await axios({ 
      url: `${ROOT_URL}api/create-sponsor`, 
      method: 'post', 
      data: { 
       name: values.name, 
       images: values.images 
      } 
     })//.then((response) => dispatch(dispatchCreateSponsor(response))); 
     .then(response => console.log(response)) 
    } 
} 

Answer 1

나는 코드에서 어떤 promises을 확인할 수 없습니다. 이미지를 업로드 할 때 프로세스가 비동기식이기 때문에 promises 또는 async await을 사용해야하며 약속이 해결되면 axios으로 게시물 요청을하십시오.

handleUpload.then( (res) => { // make your post request }, (rej) => { // handle rejection} );

Here

handleUpload() { return newPromise((resolve, reject) => { ... }) }

당신은 어쩌면 당신을 도울 것입니다, 정확한 예를 들어 있습니다.