如何在vue中同时上传图像和表单内容？

<template>
  <form @submit="submitForm">
    <input type="text" v-model="formData.name" placeholder="Name">
    <input type="file" @change="handleImageUpload">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        image: null
      }
    };
  },
  methods: {
    handleImageUpload(event) {
      const file = event.target.files[0];
      this.formData.image = file;
    },
    submitForm() {
      const formData = new FormData();
      formData.append('name', this.formData.name);
      formData.append('image', this.formData.image);

      // 使用axios发送POST请求
      axios.post('/api/upload', formData)
        .then(response => {
          // 处理上传成功的逻辑
        })
        .catch(error => {
          // 处理上传失败的逻辑
        });
    }
  }
};
</script>