React Laravel - Файл отображается в состоянии, но не в контроллере

Question

В моем проекте React в качестве внешнего интерфейса и Laravel в качестве внутреннего.Я пытаюсь загрузить файл, и сведения о файле появляются в состоянии при загрузке, но не в контроллере, и поэтому не удается загрузить его в папку.

Компонент имеет

<div className="form-group col-sm-4">
   <div className="imgPreview">{$imagePreview}</div>
   <label>Profile Pic</label>
   <input className="form-control" type="file" name="profile_pic" onChange={(e)=>this._handleImageChange(e)}/>
</div>

следующие коды:

_handleImageChange(e) {
    e.preventDefault();
    let reader = new FileReader();
    let file = e.target.files[0];    
    reader.onloadend = () => {
      this.setState({
        fileselected:           file,
        profile_pic:            file.name,
        imagePreviewUrl:        reader.result
      });
    }    
    reader.readAsDataURL(file)
  }

Данные загружаются через axios

 submitHandler = e =>{
    e.preventDefault()
    this.props.drprofilecreate(this.state)
}

export const drprofilecreate = (data) => dispatch =>{
console.log("Coming form profile create action ")
console.log(data)
return  axios.post('/api/v1/drProfileCreate', data)
.then( res =>res.data )
    .then(drprofile =>
        dispatch({
            type: DRPROFILECREATE,
            payload: drprofile,
        }),            
    )
}

Когда я просматриваю загружаемые данные, он показывает файл с его деталями, такими как имя, размер и т. д. Ното же самое не приходит в контроллер.Он показывает пустой массив.

 public function drProfileCreate(Request $request){
    $data = $request->all();
    $response = [
        'success'       =>true, 
        'datax'          =>'Dr Profile uploaded in Contorller. Check',
        'data'          => $data
    ];
    return response()->json($response, 201);
}

Следовательно, я не могу загрузить изображение.Помогите, пожалуйста.Ценится

Answer 1

Ну, я думаю, я понял, что вы хотите.Вот кое-что, что будет работать, но я понимаю, что могут существовать и другие жизнеспособные решения.

По сути, вы должны отправлять реагирующие данные внешнего интерфейса на внутренний контроллер с помощью axios.

Для этого вампридется обрабатывать событие нажатия кнопки отправки.При нажатии кнопки «Отправить» данные формы будут опубликованы в желаемой конечной точке следующим образом:

// handle button's click event
onClickHandler(){
     const data = new FormData()
     data.append('profile_pic', this.state.profile_pic)

     axios
    .post("/api/v1/drProfileCreate", data, { }) // controller will handle the upload etc
    .then(response => {
        console.log(response.data);                
        console.log(response.statusText);            
    })
    .catch(function (error) {                   
        console.log('Error', error.message)                
    })
}

// handle file change event  
onChange(e){
    console.log(event.target.files[0])
    this.setState({
        profile_pic: e.target.files[0],
      })
}

// the constructor
constructor(props) {
    super(props);
    this.state = {
        profile_pic: null,
    }
}