0

Есть необходимостью с фронта на vue вместе с обычными данными отправлять файл в запросе по API. Делаю FormData

makeFormData(data) {
  const formData = new FormData();
  for (const key in data) {
    if (Array.isArray(data[key])) {
      formData.append(key, JSON.stringify(data[key]))
    } else {
      formData.append(key, data[key]);
    }
  }
  return formData;
}

Отправляю запрос через axios

// Метод компонента
async update() {
   this.isLoaded = false;
   const formData = this.makeFormData(this.invoice);
   const res = await invoiceAPI.update(this.invoice.id, formData);
   this.invoice = res.data.data;
   this.initInvoiceState();
   this.isLoaded = true;
   this.showToast("ОК", "Счёт изменён", "success");
},
// Инстанс axios в invoiceAPI
async update(id, invoice){
    const url = '/api/v1/invoices/' + id;
    return defaultAPIInstance.put(url, invoice, {
        headers:{
            'Content-Type': 'multipart/form-data',
            'Accept': '*/*'
        }
    });
},
//в defaultAPIInstance прописывается токен авторизации.

в контроллере просто пытаюсь вывести request для теста

public function update(Request $request, $id)
{
    $invoice = Invoice::find($id);
    $invoice->update($request->all());

    return $request->all();
    // $file = $request->file('file');
    // $invoice->file = $file->store('invoices');
    // $invoice->save();

    $this->updateInvoicePositions($invoice, $request->get('positions'));
    $this->createInvoicePositions($invoice, $request->new_positions);
    $this->destroyInvoicePositions($invoice, $request->deleted_positions_ids);

    $this->checkInvoiceStatus($invoice);

    return new InvoiceResource($invoice->fresh());
}

Проблема в том что все данные в полезной нагрузке запроса есть, но $request пустой приходит и до отправки файла дело не доходит. Вот заголовки в которых всё вроде бы ОК

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Content-Length: 2567
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryBRdveT6Ekcie8afX
Host: 127.0.0.1:8001
Origin: http://127.0.0.1:8001
Referer: http://127.0.0.1:8001/
sec-ch-ua: "Google Chrome";v="111", "Not(A:Brand";v="8", "Chromium";v="111"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Уже много чего перепробовал, но так и не разобрался в чём проблема. Если просто отправлять объект, то всё ОК, проблема только с FormData. Может быть есть какой нибудь другой вариант отправки файла на бэк одним запросом?

1 ответ 1

2

Используйте метод POST и добавите это на form-data

formData.append('_method', 'put') 

чтоб получить данные

2
  • Не знаю в чём тут магия, но это сработало
    – Maxim
    6 апр в 13:06
  • 2
    Да просто method put не получает данные отправлено form-data 6 апр в 13:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.