フォーム送信（React、Express、Multer）によるファイルアップロードのリダイレクトの防止

Question

初めてファイルをアップロードする機能を設定しています。私は反応フロントエンドとファイルを格納するエクスプレスサーバーがあります。私はそれを設定して、ユーザーがファイルを提出できるようにして、それをエクスプレスサーバーに保存したいと思うように保存します。しかし、ユーザーがフォームを送信するたびに、反応フロントエンド（ポート3000上）からサーバー上のPOSTルート（ポート3050）にリダイレクトされます。私はこれがポストリクエストのデフォルトの振る舞いであったことを知らなかった。

私はこの動作を避けたいと思っていますが、これを実行する最善の方法が不明です。私はAXIOSリクエストとして機能するアクションを構築しようとしましたが、AXIOSリクエストでフォームデータ（特にファイルデータ）にアクセスするのに問題があります。私の理解は、AXIOSにマルチパートフォームデータのネイティブサポートがないことです。

Event.preventdefaultは明白な選択ですが、それを実装すると、フォーム送信が停止し、適切なフォームデータを取得してから送信します。

フォームのコードが以下に含まれています（このバージョンでは、イベントのデフォルトを防ぎ、アクションをディスパッチするオンクリックイベントが使用されています - アクションは発生しますが、

 <div className="modal-wrapper"> 
      <h3 className="title__h3">Upload Data</h3> 
      <p>Drag and drop anywhere or choose a file to upload.</p> 
      <p>.csv or .xlsx</p> 
      <form className="upload-form" ref="uploadForm" id="uploadForm" action="http://localhost:3050/upload" method="POST" enctype="multipart/form-data"> 
       <input name="fileName" placeholder="Name the file you're uploading here"/> 
       <input type="file" name="upl" id="file" className="inputfile" /> 
       <label htmlFor="file" className="btn btn__white-outline btn__full-width">Select a File</label> 
       <input onClick={this.submitForm} type="submit" value="submit" /> 
      </form> 
     </div>; 

私の簡単なMulterルート：

app.post('/upload', upload.single('upl'), function(req,res,next) { 
    return false 
}) 

私の理解では、Axiosを通じてマルチパート形式のアイテムを送信するためのネイティブサポートがないことである、私は中にいるFormDataモジュールに引っ張って避けたいのですがフォーム（他のtハンはリダイレクト）完璧に動作します。フォームデータを送信しながらフォームがサーバー側のページを読み込まないようにする簡単な解決法はありますか？

Answer 1

submitFormハンドラでは、イベントへの参照を渡し、event.preventDefault（）を使用します。

submitForm(event) { 
     event.preventDefault(); 
     ...other code here... 
    } 

また、ここで

<form className="upload-form" ref="uploadForm" id="uploadForm" action="http://localhost:3050/upload" method="POST" enctype="multipart/form-data" onSubmit={ (event) => { event.preventDefault(); } }> 

Answer 2

フォームのonSubmit属性のサブミットを処理する、onSubmit="{this.handleSubmit}"のメソッドを作成し、データを非同期で送信します。

Answer 3

を試すことができます私はhandleChange方法が<input type="file" onChange={this.handleChange} />

のonChangeイベントに関連付けられていAxios

handleChange = (event) => { 
    const fileReader = new FileReader(); 
    const fileToUpload = event.target.files[0]; 

    fileReader.onload = (upload) => { 
     const allFiles = [ ...this.state.allFiles ].concat(upload.target.result); 

     this.setState({ 
      allFiles 
     }); 
    }; 

    fileReader.readAsDataURL(fileToUpload); 
}; 

のファイルを提出処理する方法でありますその後、フォーム送信ハンドラ

handleSubmit = (event) => { 
    event.preventDefault(); //So the page does not refresh 
    const { allFiles } = this.state; 
    const Promises = []; 

    allFiles.forEach(file => { 
     Promises.push(Axios({ 
      url: "a url goes here", 
      method: "POST", 
      data: { 
       file: file, //This is a data url version of the file 
      } 
     }));  
    }); 

    Axios.all(Promises).then(result => { 
     alert(result.message); //Display if it uploaded correctly 
    }) 
};