问题描述

我的vuex存储中有一个操作方法，它有两个参数，名称分别为"；context"；和"；payload"；。 有效负载有数据，且vuex操作方法本身可以看到数据，并且使用console.log()在控制台中打印该有效负载参数附带的数据，但是当我尝试使用axios将该值发送到控制器时，控制器得到的数据为空。最可怕的事。如果我在该操作方法中给出了任何其他值，而不是"；payload.payloadDataName&q；，那么无论我在哪里给出它，它都可以很好地工作，但是它只能从axios大括号中看到有效负载值。我不知道这是什么..。对不起，在我的脑子里只有粗鲁的话，因为我花了8个多小时来解决这个问题，但是还没有积极的结果。 你能帮我解决这个问题吗？

以下是我的代码

users.js(Vuex商店模块)

actions: {
        async uploadProfileAvatar(context, payload){
            try {
                const avatar = payload.avatar; //if here i write "const avatar = 8" or "{data:8}" it will work fine 
                const response = await axios.post('/avatar', {data: avatar}); //if here instead of "{data:avatar}" I'll write "{data:8}" or "{data:{help:8}" it will work fine too
                console.log("payload.avatar = ");
                console.log(payload.avatar); //it's strange, but in this line, it works, so I can't say payload parameter's data is not coming
                return response.data;
            } catch (error) {

            }
        }, 
        ...

Profile.vue

<template>
    <div>
        <div class="d-flex justify-content-center">
            <img v-if="src!==''" :src="src" alt="something" width="250px">
        </div>

        <div class="d-flex justify-content-center">
            <form enctype="multipart/form-data">
                <input type="file" v-on:change='formFile' name="img">
                <input type="button" v-on:click="uploadImage()" value="upload">
            </form>
        </div>
        <div>
            Wall
            <button type="button">Hello</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Profile",
        data: () => {
            return {
                src: '',
                file: null
            }
        },

        mounted() {
            this.getImage();
        },

        methods: {
            getImage() {

                this.$store.dispatch('users/loadProfileAvatar').then((res) => {
                    console.log('/storage/avatars/avatar-of-user' + this.$userId + '/' + res)
                    this.src = '/storage/avatars/avatar-of-user' + this.$userId + '/' + res;
                }).catch((error) => {
                    console.log(error);
                });
            },

            formFile(e){
                this.file = e.target.files[0];
            },

            uploadImage() {
                console.log(this.file);
                this.$store.dispatch('users/uploadProfileAvatar', {
                    avatar:this.file  //this is the payload's data, which I need. 
                }).then((res) => {
                    console.log(res);
                }).catch((error) => {
                    console.log(error);
                });
            }
        }
    }
</script>

导入！我的目标是获取VUE组件的表单输入文件的数据，并将其发送到VUEX存储模块的action方法，然后通过AXIOS将其发送到需要的控制器。

已更新

async uploadProfileAvatar(context, payload){
            try {
                const avatar = payload.avatar; //if here i write "const avatar = 8" or "{data:8}" it will work fine 
                const response = await axios.post('/avatar', {data: avatar}); //if here instead of "{data:avatar}" I'll write "{data:8}" or "{data:{help:8}" it will work fine too
                console.log("payload.avatar = ");
                console.log(payload.avatar); //it's strange, but in this line, it works, so I can't say payload parameter's data is not coming
                return response.data;
            } catch (error) {

            }
        },

已更改为

async uploadProfileAvatar(context, payload){
    try {
        const avatar = payload.avatar;
        let data = new FormData();
        data.append('file',avatar);
        const response = await axios.post('/avatar', data);
        console.log("payload.avatar = ");
        console.log(payload.avatar);
        return response.data;
    } catch (error) {

    }
},

但它不起作用..。有意思，我没看到什么？

已更新

控制器的方法

public function store(Request $request)
{
    $file = $request->all();
    return response()->json([
        'file' => $file,
    ]);
}

推荐答案

尝试用大括号将上下文括起来，如

async uploadProfileAvatar({context}, payload){
...
}

这篇关于Vuex+Laravel为什么axios只发送那个值，而不发送任何值，这些值与方法的参数一起提供？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！