如何同时发布 json 和图像？ Vuetify + axios答案

【问题标题】：How can i post json and image at the same time? Vuetify + axios如何同时发布 json 和图像？ Vuetify + axios
【发布时间】：2020-12-15 21:34:54
【问题描述】：

我得到了 json 格式的数据，但也得到了相同格式的图像。如何将图片和 json 数据同时发布到 laravel 请求中？

数据对象：

{
  "pwra_uuid": "",
  "purchase_order_uuid": "26729191407884625",
  "group_tasks_uuid": "26729191407884553",
  "pwra_code": "HIS-CPPS-00281",
  "pwra_dt": "2020-08-25",
  "time": "05:25",
  "task_name": "fdsafdsa",
  "specific_location": "fdsafdsa",
  "time_session": "AM",
  "status": "",
  "employees": [
    "26535933801136175",
    "26535933801136183",
    "26535933801136169"
  ]
}

Vue js 代码：

export default {
    data() {
        return {
            chosenFile: null,
            pwra: [],
        };
    },
    methods: {
        create() {
            let data = this.pwra;
            formData.append("image", this.chosenFile);
            formData.append("data", data);
            console.log(data);
            axios.post("/pwra", formData, {
                headers: {
                    "Content-Type": "multipart/form-data",
                },
            });
        },
    },
};

Laravel 代码：

public function store(Request $request)
{
  $requestData = $request->all();
}

【问题讨论】：

标签： laravel vue.js vuetify.js

【解决方案1】：

鉴于您的复杂数据对象（复杂意味着它不仅仅是一个平面键/值映射），最好的办法是将其字符串化为 JSON，并让您的服务器端代码将其解析为一个数组。

例如

formData.append("data", JSON.stringify(data));

在服务器端，类似这样

$data = json_decode($request->input('data'));

【讨论】：

非常感谢兄弟！