Laravel / Vue Сохранение поста и связанных с ним изображений - PullRequest
Новая
       18

Laravel / Vue Сохранение поста и связанных с ним изображений

0 голосов
/ 12 апреля 2020

В настоящее время у меня возникают проблемы с сохранением изображений одновременно с сообщением или, в моем случае, местом. Кажется, проблема в том, что ax ios не передает правильные данные в мой API.

Это , как выглядят мои параметры JSON при отправке запроса на публикацию.

Что дает мне такую ​​ошибку: «Вызов функции-члена getClientOriginalExtension () on null»

Учитывая мою функцию хранилища, я предполагаю, что означает, что $ request-> images имеет значение null, но я не понимаю, почему, не должен ли он содержать мой массив изображений? 

public function store(Request $request)
{
    $user = Auth::user();
    $data = $request->validate([
        'name' => 'required|max:255',
        'address' => 'required|max:255',
        'email' => 'required|max:255',
        'phone' => 'required|max:255',
        'price' => 'required',
        'desc' => 'required|max:255',
        'wifi' => 'nullable',
        'power' => 'nullable',
        'wc' => 'nullable',
        'parking' => 'nullable',
        'coffee' => 'nullable',
        'lat' => 'required',
        'lng' => 'required'
    ]);
    $placeName = $request->name;
    $images = $request->images;


    $place = auth()->user()->places()->create($data);

    foreach ($images as $key=>$image) {
        $imageName = $key . '.' . $request->image->getClientOriginalExtension();
        $image->move(public_path('uploads/' . $placeName .'/'), $imageName);
        PlacesImages::create([
            'image_path' => '/uploads/' . $placeName . '/' . $imageName,
            'place_id' => $place->id
        ]);
    }


    return response($place, 200);
}

Вот соответствующая часть кода компонента vue: 

<template>
  <div class="flex flex-col mx-4 my-12">
    [...]
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-change="updateImageList"
      :auto-upload="false"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <button
      class="border border-blue-500 bg-blue-500 text-white hover:bg-blue-800 py-2 px-4 rounded tracking-wide my-2 md:mb-0 md:mr-1 max-w-sm"
      @click="addPlace"
    >Ajouter</button>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      required: true,
      type: Object
    }
  },
  methods: {
    addPlace() {
      axios.post("/places", this.data);
    },
    updateImageList(file) {
      this.data.images.push(file.raw);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.data.images.push(file);
      this.dialogVisible = true;
    }
  },

  data: function() {
    return {
      data: {
        name: "",
        address: "",
        email: "",
        phone: "",
        price: "",
        desc: "",
        wifi: "",
        wc: "",
        parking: "",
        coffee: "",
        lat: "",
        lng: "",
        images: []
      },
      dialogImageUrl: "",
      dialogVisible: false
    };
  }
};
</script>

Спасибо за помощь!

...