reactjsを使ってファイルをアップロードし、C：/ fakepath/fileを扱います

Question

ファイルをアップロードする簡単なフォームがあります。これは後で私のバックエンドのPythonコードで処理されます。しかし、ファイルをアップロードしようとすると、C：\ fakepath \ test.txtになります。

私はこれをやり遂げたことから、これはセキュリティの問題から期待され、実行されました。これは問題ありませんが、今私の質問は、私がバックエンドでアップロードしているファイルを使用できるようにするために、世界中でどうすればよいのでしょうか？

私はさまざまな場所を見てきましたが、そのうちのどれもそれに対処していないようです。ここで

は私の現在のコードです：

class SomeForm extends Component{ 

    handleFile(e){ 
     this.setState({value: e.target.value}); 
    } 

    handleSubmit(e){ 
     var me=this; 
     if (this.state.value.length>0){ 
      var upload_file = this.state.value; 
      const request = axios.post(this.props.cfg_url+'/upload', {upload_file}) 
       .then(function(response){ 
       console.log('successfully uploaded', upload_file); 
      }) 

     } 
    } 

    render(){ 
     return(


      <Form inline onSubmit={this.handleSubmit}> 
         <FormGroup controlId='uploadFormId'> 
          <ControlLabel>Upload File:</ControlLabel> 
          <FormControl 
           type='file' 
           label='File' 
           onChange={this.props.onChange} 
          /> 
         </FormGroup> 
         <Button type='submit'>Upload</Button> 
        </Form> 
     ); 

    } 
} 

Answer 1

あなたがvar upload_file = this.state.value;を行うなぜあなたはvar upload_file = this.state.value;を設定している場合、私は得ることはありませんが、あなたは（下の例では）状態オブジェクトでvalueを割り当てることはありません。

私はfilesの代わりにinput['file']のvalueプロパティを使用していると思います。 filesプロパティを使用して選択したファイルを取得し、FormData interfaceを使用してフォームパラメータをマップする必要があります。

class SomeForm extends Component { 

    handleSubmit(e){ 
     if (e.target.input.files.length) { 
      const upload_file = e.target.input.files[0]; 
      const formData = new FormData(); 
      formData.append('file', upload_file); 

      const request = axios.post(this.props.cfg_url+'/upload', formData) 
       .then(function(response){ 
        console.log('successfully uploaded', upload_file); 
       }); 
     } else { 
      console.log('You need to select a file'); 
     } 
    } 

    render(){ 
     return(
      <Form inline onSubmit={this.handleSubmit}> 
       <FormGroup controlId='uploadFormId'> 
        <ControlLabel>Upload File:</ControlLabel> 
        <FormControl 
         type='file' 
         name="input-file" 
         label='File' 
        /> 
       </FormGroup> 
       <Button type='submit'>Upload</Button> 
      </Form> 
     ); 
    } 
} 

Live Example

出典：https://github.com/mzabriskie/axios/tree/master/examples/upload