Vue axios FormData 对象转换附加值答案

【问题标题】：Vue axios FormData object transforms appended valuesVue axios FormData 对象转换附加值
【发布时间】：2019-04-01 09:43:40
【问题描述】：

我正在使用 axios 上传多个文件和其他一些东西。其中包括整数数组（来自复选框）和一些布尔值。

一开始我试过这个：

axios.post(this.route, {
    name: this.name,
    ...
    photos: this.photos
})

除了后端将照片作为空对象接收之外，一切都很完美。所以我尝试了以下

let formData = new FormData()
formData.append('name', this.name)
...
for(let i = 0; i < this.photos.length; i++) {
     let photo = this.photos[i]

     formData.append('photos['+i+']', photo)
}
axios.post(this.route, formData)

照片工作得很好，但其他数据（如来自收音机的数组和布尔值）开始出错。 FormData 将它们转换为字符串，在后端像数组和布尔值一样直接接收它们之前，我想要那个。我使用 Laravel 作为后端，验证没有通过这种方式。

【问题讨论】：

标签： laravel vue.js axios form-data

【解决方案1】：

如果您想上传文件和其他结构化 JSON 数据，那么您需要手动对文件旁边的所有其他数据进行 JSON 字符串化。

这是一个例子：

const fd = new FormData()

// Include file
fd.append('photo', file)

// Include JSON
fd.append('data', JSON.stringify({
  name: 'Bob',
  age: 20,
  registered: true,
})

axios.post('/users', fd)

在服务器上，您还需要使用 json_decode 手动 JSON 解析 data 字段（抱歉，我不熟悉 Laravel 或 PHP）。

【讨论】：

这是混合解决方案。通常，当第 3 方服务器接受表单数据时，它会以纯标准格式获取所有表单数据，而无需从 JSON 解析。即使您可以访问 FE 和 BE，您也应该遵循这些标准。请求应该是 json 的表单数据，而不是两者。
当然你应该优先考虑key-value形式的数据对，但是如果你想发送复杂的结构化数据不能这样表示，那么JSON编码是一个很好的解决方案。

【解决方案2】：

我设法让 formdata 以我想要的方式发送数据。我希望有一个更简单的方法，但这就是我所做的。

        let formData = new FormData()
        formData.append('name', this.name)
        formData.append('phone', this.phone)
        formData.append('email', this.email)
        formData.append('house_state', this.house_state)

        // The boolean values were passed as "true" or "false" but now I pass them as "0" or "1" which is strill a string but Laravel recognizes it as an indicator of true or false
        formData.append('has_lived_soon', this.has_lived_soon ? 1 : 0)
        formData.append('can_rent_now', this.can_rent_now ? 1 : 0)

        formData.append('beds_count', this.beds_count)
        formData.append('seasonality', this.seasonality)

        // Here's what I do for the arrays
        for(let extra of this.extras_values) {
            formData.append('extras[]', extra)
        }

        formData.append('estate_issues', this.estate_issues ? 1 : 0)
        formData.append('road_state', this.road_state)
        formData.append('usability', this.usability ? 1 : 0)

        for(let heating_method of this.heating_values) {
            formData.append('heating_methods[]', heating_method)
        }

        formData.append('heating_other', this.heating_other)
        formData.append('address', this.address)

        for(let i = 0; i < this.photos.length; i++) {
            let photo = this.photos[i]

            formData.append('photos['+i+']', photo)
        }

        axios.post(this.route, formData)
            .then(function(response) {
                console.log(response.data)
            })
            .catch(function(error) {
                app.errors = error.response.data.errors
            })

【讨论】：