vue2+elementui上传文件-同时上传表单数据和文件

在Vue2中，结合Element UI进行文件上传的同时发送表单数据，可以使用Element UI的el-upload组件，并结合axios来发送HTTP请求。以下是一个简单的例子：

1. 安装axios（如果尚未安装）:

npm install axios

2. 在Vue组件中使用el-upload和axios发送文件和表单数据：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="文件">
      <el-upload
        ref="upload"
        action="http://your-api-endpoint.com/upload"
        :on-success="handleSuccess"
        :on-error="handleError"
        :file-list="fileList"
        :data="form">
        <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitForm">上传到服务器</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      form: {
        name: '',
        // 其他表单字段
      },
      fileList: []
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const formData = new FormData();
          // 将表单数据添加到formData
          for (let key in this.form) {
            formData.append(key, this.form[key]);
          }
          // 将文件添加到formData
          this.$refs.upload.submit(); // 触发el-upload的上传
          // 如果需要手动上传，可以遍历fileList
          this.fileList.forEach(file => {
            formData.append('files[]', file.raw);
          });
          // 发送请求
          axios.post('http://your-api-endpoint.com/upload', formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          .then(response => {
            console.log('Success:', response);
          })
          .catch(error => {
            console.error('Error:', error);
          });
        }
      });
    },
    handleSuccess(response, file, fileList) {
      console.log('File uploaded successfully:', response);
    },
    handleError(err, file, fileList) {
      console.error('Error uploading file:', err);
    }
  }
};
</script>

在这个例子中，我们使用了el-upload的action属性来指定上传的API端点，并通过data属性来传递表单数据。我们还需要为文件数据创建一个FormData实例，并将表单数据和文件数据都添加到这个实例中。最后，我们通过axios发送一个POST请求，其中包括了表单数据和文件。

请确保替换http://your-api-endpoint.com/upload为您的实际API端点。