Question

我正在使用Vue，Laravel和Axios开发管理仪表板。我在尝试将文件上传到api时遇到了一些问题。

我将一些真实数据替换为数据类型

在客户端，我具有对象数组：

axScatter = plt.subplot(111)
axScatter.scatter(x=mean_var_r["Variance"],y=mean_var_r["Mean"])
xlim = [-0.003, 0.003]
plt.xlim(xlim)
plt.show()

可以将对象添加到数组：

[
    {
        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
    })
}

我正在使用随机ID通过以下方式将图像文件附加到对象：

<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)">

所以问题是当我尝试使用axios将数据发布到api时，我收到错误消息：

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

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

Trying to get property 'img' of non-object

Laravel控制器的一部分：

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

因此，问题是：有什么想法可以解决问题吗？

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？

1 个答案: