使用追加后表单数据为空？答案

【问题标题】：Form data is empty after using append?使用追加后表单数据为空？
【发布时间】：2023-03-14 10:26:01
【问题描述】：

我在表单数据中附加任何内容时遇到问题。它总是空的。如何附加图像文件和其他一些数据？

    var data = new FormData();
    fileResult = this.$els.fileIntroImage.files;

    data.append('name',this.property_credentials.name);
    data.append('default_image',this.$els.fileIntroImage.files[0],File);
    console.log('data',data);

【问题讨论】：

尝试登录：data.get('name')
现在我可以在 vue.js 中显示它了，但是如何将这些参数传递给 laravel 控制器呢？当我这样使用 this.$http.put('/profile/'+ user_id +'/property/'+ property_id +'/edit', data).then(function(response) { } 它是空的
FormData 对象是只写的，不能回显到控制台。但是，您确定根本没有发送数据吗？检查浏览器的开发工具并查看 ajax 请求的标头选项卡，它会在请求部分显示发送的内容。
@Joe “FormData 对象是只写的，不能回显到控制台”——太棒了。谢谢！

标签： laravel laravel-5 laravel-5.2 vue.js

【解决方案1】：

我花了一些时间来了解如何使用 Vue 上传文件。

这是我的 Vue 组件上的方法对象：

methods: {
    upload(e) {
        e.preventDefault();
        var self = this;

        var formData = this.gatherFormData();

        this.$http.post('/path/to/upload/method', formData)
        .then(response => {
           //do stuff
        },
        (response) => {
          //show error
        });
    },
    gatherFormData() {
        const data = new FormData();

        data.append('image', this.$refs.image.files[0]);
        data.append('other_field', this.other_field);
        return data;
    }
},

就 Laravel 而言，这应该作为一个普通的文件字段。

【讨论】：

【解决方案2】：

它可以被记录，你只需要记录每个项目。您可以使用 FormData 的迭代器函数来执行此操作。

var data = new FormData();
data.append('name',this.property_credentials.name);
data.append('default_image',this.$els.fileIntroImage.files[0],File);
data.forEach(el => console.log(el));

【讨论】：