Как правильно загрузить файл с React/Laravel?

199
15 февраля 2019, 04:40

Подскажите пожалуйста как правильно загрузить фото с React, так как приходит только имя файла, а не сам файл.

component.js

export default class Home extends Component
{
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${
        this.fileInput.current.files[0].name
        }`
    );
    this.props.photoAdd(this.fileInput.current.files[0].name);
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit} encType='multipart/form-data'>
        <label>
          Upload ----file:
          <input type='file' ref={this.fileInput} />
        </label>
        <br/>
        <button type='submit'>Submit</button>
      </form>
    );
  }
}

action.js

export function photoAdd (photo)
{
  const token = localStorage.getItem('accessToken')
  const requestBody =  'photo='+ photo ;
  const formData = {file: photo}
  const config = {
    headers: {
      'Authorization': 'Bearer ' + token,
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded',
    }
  }
  return function (dispatch) {
    dispatch({
      type: ADDPHOTO_REQUEST
    })
    axios.post('/api/addpic', formData, config)
      .then(response => {
        dispatch({
          type: ADDPHOTO_SUCCESS,
          payload: response,
        })
      })
      .catch(error => {
        dispatch({
          type: ADDPHOTO_FAIL,
          payload: error
        })
      })
  }
}

addpic.php

public function addpic(Request $request)
{
    $user = Auth::user();
    $name = mb_strtoupper($user->name[0]);
    $input=$request->all();
    if($request->hasFile('image')) {
        $filename= md5($_FILES['image']['name']).'.img';
        $file = $request->file('image');
        $file->move(public_path() . '/gallery',$filename);
        $success='yeah!!!';
    } else {
        $success = 'oh no';
    }
    return response()->json(['success' => $success], $this->successStatus);
}
Answer 1

У вас не FormData а обычный объект.

Попробуйте вместо

const formData = {file: photo}

Этот вариант:

const formData = new FormData()

Вы можете добавлять пару ключ/значение с помощью FormData.append:

formData.append('file', myFileInput.files[0])

Если через photo как у вас:

formData.append('file', photo)

Но photo должен быть объектом File.

READ ALSO
CURL скачать картинку base_64

CURL скачать картинку base_64

На сайте картинки проставлены через

179
Настройка локали в Zend 3

Настройка локали в Zend 3

Я получаю язык из get параметра в файле модуля

150