如何在Vue中使用一个axios Post提交图像(formData)和字符串文本变量(数据)？

npm install axios vue-axios

import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

methods: {
  submitData() {
    // 创建一个FormData对象
    let formData = new FormData();

    // 添加图像文件到FormData对象中
    formData.append('image', this.imageFile);

    // 添加字符串文本变量到FormData对象中
    formData.append('data', this.textData);

    // 使用axios进行POST请求
    this.axios.post('/api/submit', formData)
      .then(response => {
        // 处理响应数据
        console.log(response.data);
      })
      .catch(error => {
        // 处理错误
        console.error(error);
      });
  }
}

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <input type="text" v-model="textData">
    <button @click="submitData">提交</button>
  </div>
</template>

methods: {
  handleFileChange(event) {
    // 获取选择的文件
    this.imageFile = event.target.files[0];
  }
}