JS — 如何将带有文件的对象数组附加到 FormData？

Question

我正在使用 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>

我使用随机 ID 将图像文件附加到对象：

<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]
}

所以问题是当我尝试使用 axios post 将此数据 api 时，我收到错误：

Trying to get property 'img' of non-object

发生这种情况是因为我正在使用 JSON.stringify() 并且图像对象转换为图像数组：

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

部分Laravel控制器：

$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);
}

所以，问题是：有什么解决问题的想法吗？

Answer 1

自己找到解决方案：

$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();
        }

JS — 如何将带有文件的对象数组附加到 FormData？

JS — how to append Array of Objects with files to FormData?

javascript

form-data