JS - как добавить массив объектов с файлами в FormData? - PullRequest
Новая
       15

JS - как добавить массив объектов с файлами в FormData?

0 голосов
/ 14 мая 2019

Я занимаюсь разработкой админ-панели с Vue, Laravel & Axios.И у меня есть некоторые проблемы при попытке загрузить файлы в API.

Я заменил некоторые реальные данные на тип данных

На стороне клиента у меня есть массив объектов: 

[
    {
        id: random_generated_id,
        img: {obj},
        img_is_fullwidth: boolean,
        site_url: string,
        description: string
    },
    {
        id: random_generated_id
        img: {obj},
        img_is_fullwidth: boolean,
        site_url: string,
        description: string
    }
    ...
]

Объекты могут быть добавлены в массив: 

addObject() {
    this.array.push({
        id: new Date().valueOf(),
        img: null,
        img_is_fullwidth: null,
        site_url: null,
        description: null
    })
}

<div v-for="(content, index) in array" :key="content.index">
    <input type="file" :ref="'content' + content.id" v-on:change="handleFileUpload(content.id)">

    <label class="checkbox">
        <input type="checkbox" v-model="content.img_is_fullwidth">
        is fullwidth?
    </label>

    <input type="text" v-model="content.site_url" required>

    <input type="text" v-model="content.description" required>
</div>

<button @click.prevent="addContent">Add content</button>

И я использую случайные идентификаторы для прикрепления файла изображения к объекту: 

<input class="file-input" type="file" :ref="'content' + content.id" v-on:change="handleFileUpload(content.id)">

handleFileUpload(itemId) {
   var itemIndex = this.array.findIndex(i => i.id === itemId)
   this.array[itemIndex].img = this.$refs['content' + itemId][0].files[0]
}

Такпроблема в том, что когда я пытаюсь отправить эти данные в api с помощью axios, я получаю сообщение об ошибке: 

Trying to get property 'img' of non-object

Это происходит потому, что я использую JSON.stringify (), и объект изображения преобразуется в массив изображений:

let fd = new FormData()
fd.append('array', JSON.stringify(this.array))

Часть Laravel Controller: 

$array = json_decode($request->array, true);

foreach ($array as $content) {

    $newContent = new WorkContent;

    $contentImg = $content->img;

    $contentName = uniqid();
    $contentExt = $contentImg->getClientOriginalExtension();
    $contentPath = $contentImg->storeAs('works/'.$request->client.'/'.$request->slug, $contentName.'.'.$contentExt);

    $newContent->img_url = $contentPath;

    if ($content->img_is_fullwidth == 'true') {
        $newContent->img_is_fullwidth = true;
    } else if ($content->img_is_fullwidth == 'false') {
        $newContent->img_is_fullwidth = false;
    }

    $newContent->site_url = $content->site_url;
    $newContent->description = $content->description;

    $newContent->save();

    $work->contents()->attach($newContent);
}

Итак, вопрос: есть идеи, как решить проблему?

1 Ответ

0 голосов
/ 29 мая 2019

Сам нашел решение: 

$contentArray = json_decode($r->contents, true);

$contentImgs = $r->contentImgs;

        $imgIndex = 0;

        for ($i = 0; $i < sizeof($contentArray); $i++) {
            if($contentArray[$i]['img'] !== null) {
                $contentArray[$i]['img'] = $r->contentImgs[$imgIndex];
            }
        }

        foreach ($contentArray as $content) {
            $newContent = new WorkContent;

            $contentImg = $content['img'];

            if ($contentImg !== null) {
                $contentName = uniqid();
                $contentExt = $contentImg->getClientOriginalExtension();
                $contentPath = $contentImg->storeAs('works/'.$r->client.'/'.$r->slug, $contentName.'.'.$contentExt);

                $newContent->img_url = $contentPath;
            }

            if ($content['img_is_fullwidth'] == 'true') {
                $newContent->img_is_fullwidth = true;
            } else if ($content['img_is_fullwidth'] == 'false') {
                $newContent->img_is_fullwidth = false;
            }

            $newContent->site_url = $content['site_url'];
            $newContent->description = $content['description'];

            $newContent->work_id = $w->id;

            $newContent->save();
        }
...