如何使用 vuex 和 laravel 上传带有标题和描述的文件

Question

我的项目中有一个部分，我可以在其中上传 post 和图像

我试过了，但它返回了 419 状态

vue 脚本：

    <script>
export default {
    data() {
        return{
            post: {
                title: '',
                description: '',
            },
            file: '',
            name: '',
        }
    },
    methods: {
        onChange(e){
            this.file = e.target.files[0];
        },

        createPost(e){
            e.preventDefault();
            const config = {
                headers: {
                    'content-type': 'multipart/form-data'
                }
            }

            let data = new FormData();
            data.append('file', this.file);

            this.$store.dispatch('createPost', this.post, data, config);
        }
    }
}
</script>

vuex store 的动作：

createPost({}, post, data, config){
        axios.post('api/createPost',{
            title: post.title,
            description: post.description
        }, data , config ).then(res => {
            console.log(res);
        }).catch(err =>{
            console.log(err);
        })
    }

我遇到了这个错误：

POST http://127.0.0.1:8000/dashboard/api/createPost 419（未知状态）

Answer 1

我想通了

脚本应该是这样的：

    <script>
export default {
    data() {
        return{
            post: {
                title: '',
                description: '',
            },
            file: '',
        }
    },
    methods: {
        onChange(e){
            this.file = e.target.files[0];
        },

        createPost(e){
            e.preventDefault();
            const config = {
                headers: {
                    'content-type': 'multipart/form-data'
                }
            }

            let data = new FormData();
            data.append('file', this.file);
            data.append('title', this.post.title);
            data.append('description', this.post.description);

            this.$store.dispatch('createPost', data, config);
        }
    }
}
</script>

vuex 文件应该包含这个：

createPost({}, data, config){
        axios.post('/api/createPost', data , config ).then(res => {
            console.log(res);
        }).catch(err =>{
            console.error(err);
        })
    }

如何使用 vuex 和 laravel 上传带有标题和描述的文件

how to upload file with title and description using vuex and laravel

vuex

vuejs2

laravel-8