Javascript VueJS Laravel-使用Axios post上传图像错误：'；给定的数据无效'；

在学校，我和一些人一起写了一个博客，现在我想上传一张图片到博客上。但这会导致上传帖子时出现错误：

{消息：“给定的数据无效。”，错误：{image:[“图像字段是必需的。”]} 错误：{image:[“图像字段是必需的。”]} 消息：“给定的数据无效。”

我在互联网上搜索过，也看过其他对话，但我找不到我的解决方案。 这是我的密码：

这是VueJS组件中的表单：

<form method="post" action="./api/post" @submit.prevent="createPost()" enctype="multipart/form-data">
    <p>Titel van de post</p>
    <input type="text" placeholder="Titel van de post" name="title" v-model="title">
    <p>Beschrijving bij de post</p>
    <textarea placeholder="Beschrijving bij de post" name="description" v-model="description"/>
    <input type="file" id="image" name="image" ref="image" v-on:change="(e) => {this.onChangeFileUpload(e)}"/>
    <div class="uploadtimer">
        <p>Selecteer een tijd wanneer de post moet worden getoond. (Niet verplicht)</p>
        <datetime format="YYYY-MM-DD H:i" v-model="uploadTime"></datetime>
    </div>
    <input type="submit" class="input-submit">
</form>

<script>
import datetime from 'vuejs-datetimepicker';

export default {
    components: { datetime },
    data() {
        return {
            title: '',
            description: '',
            uploadTime: '',
            image: '',
        }
    },

    methods: {
        onChangeFileUpload(e) {
            this.image = e.target.files[0];
        },
        createPost() {
            let data = new FormData;
            data.append('image', this.image);

            axios.post('./api/post', {
                title: this.title,
                description: this.description,
                data,
                uploadTime: this.uploadTime,

            }).then(response => {

            }).catch(response => {
                document.getElementById('errorMSG').style.display = 'flex';
                document.getElementById('errorMSG').innerHTML = '<span>!</span><p>Er is iets mis gegaan met het plaatsen van de post.</p>';
                setTimeout(function() {
                    document.getElementById('errorMSG').style.display = 'none';
                }, 5000);
            });


        }
    },
}

---

如何修复此问题？

您可以使用

image

规则（验证文件是否为jpeg、png、bmp、gif、svg或webp）或使用

mimes:jpeg、png、jpg、gif、svg

：

因此，您的验证将是：

'image'=>'必需|文件| mimes:jpeg、png、jpg、gif、svg | max:2048'，

或：

'image'=>'必需|文件|图像|最大值：2048'，

此外，

文件

规则检查字段是否是成功上载的文件，并且

最大值：2048

规则检查文件大小是否小于或等于2048 KB（2MB）。有关更多信息，请参阅

在VueJs上，您必须将所有输入附加到

FormData

：

let data=new FormData；
data.append（'image'，this.image）；
data.append（'title'，this.title）；
data.append（'description'，this.description）；
data.append（'uploadTime'，this.uploadTime）；
axios.post（'./api/post'，数据）
.那么(
//...

{消息：“给定的数据无效。”，…}错误：{image:[“图像必须是文件。”，“图像必须是类型为：jpeg、png、jpg、gif、svg的文件。”]}消息：“给定的数据无效。”@JensBouma您是否已按上述方式更改js？您的文件可能已损坏，请尝试使用另一个文件。是的，我已更改了它。当我上载扩展名为.png的文件时，仍然会出现错误“图像必须是一个类型的文件：jpeg、png、jpg、gif、svg'Nvm，我在一个位置使用了它，而不是image@HafezDivandari这对我很管用。起初我在努力在axios.post调用中将我的数据作为对象传递，但它不起作用。为什么在Vue.js中将数据设置为

new FormData

对象会起作用？你能在此链接文档吗？回答得很好，谢谢！

public function store(Request $request)
{
    if(Auth::check()) {

        $this->validate($request, [
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg',
        ]);

        $post = new Post();
        $post->title = $request->input('title');
        $post->description = $request->input('description');

        $image = $request->file('image');

        $imageExtension = $image->getClientOriginalExtension();
        $imageName = time() . '_' . $imageExtension;

        $image->move(public_path('/imgs/users-avatars/'), $imageName);

        $post->image = '/imgs/posts-images/' . $imageName;

        $post->uploadTime = $request->input('uploadTime');
        $post->user_id = Auth::User()->id;

        $post->save();

        return (['message' => 'succes']);
    } else {
        return (['message' => 'error', 'handler' => 'Authenticated user is required!']);
    }
}