上傳帶reactjs的文件並處理C：/ fakepath /文件

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（在下面的例子）。

我認爲你使用的是的value屬性而不是files。必須使用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