Vue 和 HTML FormData配合axios或ajax上传文件，提交表单数据

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="file" @change="onFileChange" />
      <input type="text" v-model="formData.name" />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      file: null,
      formData: {
        name: '',
      },
    };
  },
  methods: {
    onFileChange(e) {
      this.file = e.target.files[0];
    },
    submitForm() {
      const formData = new FormData();
      formData.append('file', this.file);
      formData.append('name', this.formData.name);
 
      // 使用axios上传文件和表单数据
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        // 处理响应
        console.log(response);
      })
      .catch(error => {
        // 处理错误
        console.error(error);
      });
    }
  }
};
</script>

这段代码展示了如何在Vue组件中处理文件上传和表单数据的提交。它包括了文件输入、文本输入和提交按钮。在用户提交表单时，它会触发submitForm方法，该方法将文件和表单数据添加到FormData对象中，然后使用axios发送一个POST请求到服务器。服务器端需要相应地处理这些数据。