Dynami c Форма
Добавление и удаление ящиков работает нормально, и данные хорошо подаются при вводе текста в форму. Даже фотография снимается очень хорошо
<form>
<div class="box" v-for="(data,i) in datas" :key="i">
<input type="text" v-model="data[i]['key1']>
<input type="text" v-model="data[i]['key2']>
<input type="file" @change="selectImage($event,i)">
// I have not included add/delete methods to reduce codes
<button @click.prevent="method_to_add_box">Add</button>
<button @click.prevent="method_to_delete_box">Del</button>
<button @click.prevent="submitData">Submit</button>
</div>
</form>
Vuejs скрипты
datas: [
{key1:'value1',key2:'value2',photoToUpload:null}
],
methods: {
submitData() {
let theData = new FormData();
theData.append('datas',JSON.stringify(this.datas));
let config = {
headers: {
'Content-Type':'multipart/form-data',
}
};
axios.post('/url', theData, config)
.then(res => console.log(res))
.catch(err => console.log(err))
},
selectImage(event, i) {
let theImage = event.target.files[0];
this.datas[i].photoToUpload = theImage;
}
}
Я получаю данные в Laravel backend
$datas = json_decode($request->datas);
if(is_array($datas)) {
foreach($datas as $data) {
$object = new Object();
$object->field1 = $data->key1;
$object->field2 = $data->key2;
// problem starts here - photo seen as an empty object so can't store()
$path = $data->photoToUpload->store('/path');
$path = explode('/',$path); $filename = $path[2]
$object->photo = $filename;
if($object->save()) {
return new ObjectResource($object);
}
}
}
Устранение неполадок и результаты
Пытался вернуть ответ сразу после json_decode ($ request-> datas), и вот результаты;
$datas = json_decode($request->datas);
return \response([$datas[0]->photoToUpload]);
Ответ вкладки «Сеть в инструментах разработчика» возвращает
[{ }], status is OK
также пытался вернуть расширение фотографии
return \response([$datas[0]->photoToUpload->extension()]);
Предварительный просмотр вкладки «Сеть в инструментах разработчика» возвращает сообщение ниже
«Вызов неопределенного метода stdClass :: extension ()», код состояния: 500 Внутренняя ошибка сервера
Однако, если я не помещаю fileToUpload в массив в данных Vuejs Я могу добавить к данным формы, получить в Laravel бэкэнд и загрузить без проблем.
Что я здесь делаю не так? Пожалуйста, помогите