React-Node File Uploader

Question

私は実際にファイルをアップロードして仕事をするのに本当に苦労しています。私はこれがこれまでのように挑戦的になるとは思わなかった。

だから私は、単純なHTML要素から始めましょう：

handleSubmit = (event) => { 
     event.preventDefault(); 

     axios.post('/api/v1/testing/upload', 
      this.state.file) 
      .then(function (response) { 
      console.log(response); 
      }) 
      .catch(function (error) { 
      console.log(error); 
     }); 
    }; 

私はbusboy、私は考えることができるマルチパートのすべてを使用しました：ここ

<input type="file" id="server-avatar-file" className="file-input" accept=".jpg,.jpeg,.png" onChange={this.handleChange} style={{position: "absolute", top: "0px", left: "0px", width: "100%", height: "100%", opacity: "0", cursor: "pointer"}} /> 

は私のフォームデータを提出しています。

しかし、問題は私のフロントエンドが私のバックエンドにすべての正しい情報を送信していないことに起因していると思います。それは価値がありますようthis.state.fileが持っているものである

：

私は、ファイルの種類を解析しないノードでbodyParserを理解し、私は、サーバー上でそれらを解析する方法に慣れていませんよ。ファイルシステムにアップロードしてテストしたいのですが、実稼働環境でCDNに移動したいので、それを簡単に行うことができればすばらしいでしょう！

Answer 1

busboyとmulterとその他のマルチパート解析モジュールでは、正しくフォーマットされたmultipart/form-data要求が必要です。このようなリクエストをaxiosで送信する簡単な方法の1つは、代わりにFileまたはBlobのインスタンスの代わりにFormDataインスタンスをデータ引数として渡すことです。