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

【问题标题】：how to upload file with title and description using vuex and laravel如何使用 vuex 和 laravel 上传带有标题和描述的文件
【发布时间】：2021-05-12 18:04:03
【问题描述】：

我的项目中有一个部分可以上传带有图片的帖子

我试过了，但它返回 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 商店的动作：

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/createPost419（未知状态）

【问题讨论】：

缺少 CSRF 令牌？你在某处添加/发送它吗？
我以为我在使用刀片时只需要 csrf 令牌，而我正在使用 vue 作为前端

标签： vuejs2 vuex laravel-8

【解决方案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);
        })
    }

【讨论】：