Vue+axios使用FormData方式向后端发送数据

---

前言

在前后端分离的项目中经常使用到Vue+axios通过FormData的方式向后端(Java)发送表单数据(文字+图片)，但是在初次写这个功能时，可能会遇到很多问题，本文详细的记录了该功能的实现。

---

一、该功能应用场景

前端向后端发送表单数据时，可能会同时发送图片和文本，这时会有一些需要注意的小细节。

二、代码示例

1.前端（使用的ant-design-vue，element-ui同理）

代码如下（示例）：

<template>
  <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-model-item label="标题">
      <a-input v-model="form.title"/>
    </a-form-model-item>
    <a-form-model-item label="作者">
      <a-input v-model="form.author"/>
    </a-form-model-item>
    <a-form-model-item label="类型">
      <a-radio-group v-model="form.tag">
        <a-radio :style="radioStyle" :value="1">
          生活
        </a-radio>
        <a-radio :style="radioStyle" :value="2