Загрузка файла с помощью responsejs и работа с C:/fakepath/file

Question

У меня есть простая форма для загрузки файла, который позже будет обрабатываться с моим внутренним кодом python. Однако, что я получаю, когда пытаюсь загрузить файл, это C: \ fakepath \ test.txt.

Из исследования, которое я сделал, это ожидается и сделано из-за проблем с безопасностью. Это хорошо, но теперь мой вопрос в том, как в мире я могу обойти это, чтобы иметь возможность использовать файл, который я загружаю на своем back-end?

Я смотрел кучу разных мест, и никто из них, похоже, не обращается к этому.

Вот мой текущий код:

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 объекта input['file'] вместо 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