React JS file upload

Question

私は1つのイメージファイルをアップロードし、そのパスをデータベースに保存しようとしています。しかし、アップロードされた画像（その詳細はアプリの状態で保存されます）を送信しようとすると、送信された画像に関してリクエストのペイロードは空です。ここで

は私のコンポーネントです：

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ハンドラです：

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

そしてhandleSubmit：

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 
    }); 
} 

これをt彼はファイルをアップロードするリストです。

これは、要求のデータです。

アップデート - アクションフォルダ内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() { return newPromise((resolve, reject) => { ... }) }

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

Hereあなたは、正確な例を持っている、多分それはあなたを助けるでしょう。