Есть необходимостью с фронта на 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
. Может быть есть какой нибудь другой вариант отправки файла на бэк одним запросом?