Как я могу загрузить файл изображения и объект данных с топором ios в Vue & Laravel? - PullRequest
1 голос
/ 26 апреля 2020

Я пытаюсь загрузить изображение и несколько текстовых / числовых c полей данных в MySQL БД с Vue, Laravel и Ax ios.

Вот метод в моем Vue компоненте:

 addProductToShop() {
      const imageData = this.$refs.inputUpload.files[0];
      const formData = new FormData();
      formData.append("image", imageData);

      axios
        .post("api/createProduct", {
          formData,
          ...this.newProduct
        })
        .then(res => {
          console.log(res);
        });
    },

А вот метод в моем Laravel контроллере:

public function create(Request $request)
{
    $product = Product::create([
        'name' => $request->name,
        'price' => $request->price,
        'amountInStock' => $request->amountInStock,
        'image' => $request->image->store('ProductImages', 'public'),
        'measuringUnitId' => $request->measuringUnitId,
        'categoryId' => $request->categoryId,
        'shopId' => $request->shopId,
    ]);

    return response()->json([
        'status' => 'success',
        'message' => 'Product added seccessfully',
        'product' => $product
    ], 200);
}

Вот тело запроса в телескопе:

{
  "formData": [],
  "name": "111",
  "categoryId": null,
  "price": "111",
  "amountInStock": "111",
  "measuringUnitId": 2,
  "visability": true
}

И вот ошибка, которую я получаю: Call to a member function store() on null

Я попытался добавить заголовки данных нескольких форм:

   headers: {
        'Content-Type': 'multipart/form-data'
    }

Однако они сгенерировали эту ошибку: Missing boundary in multipart/form-data POST data in Unknown on line 0 Итак, теперь они кажутся устаревшими, потому что топор ios знает коррент formData, основанный на FormData().

Может кто-нибудь указать, что я делаю неправильно? Заранее спасибо!

1 Ответ

1 голос
/ 27 апреля 2020

Ошибка здесь:

'image' => $request->image->store('ProductImages', 'public')

Правильный путь:

'image' => $request->file('image')->store('ProductImages', 'public')
...