elmentui http-request上传方法文件和表单一起提交

Element UI库中的`el-upload`组件提供了一种便捷的方式来处理文件上传。如果你想同时将文件和表单数据一起通过`http-request`的方式提交，可以按照以下步骤操作：

1. 首先，在Vue项目中，引入`element-ui`库，并在需要上传文件的表单上使用`el-upload`组件。

<template>
  <form @submit.prevent="submitForm">
    <!-- ...其他表单元素 -->
    <el-upload
      :action="uploadUrl"
      :file-list="fileList"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <i class="el-icon-upload"></i>
      <div slot="tip">点击上传</div>
    </el-upload>
    <!-- ...表单字段如文本框、下拉选择等 -->
    <button type="submit">提交</button>
  </form>
</template>

2. 在`data`里定义相关的状态变量，比如`fileList`用于存储已选文件，`uploadUrl`是你的API地址。

export default {
  data() {
    return {
      fileList: [],
      uploadUrl: 'your-api-url',
    };
  },
  // ...
}

3. 添加事件处理器函数，例如`handleChange`处理文件选择，`beforeUpload`检查是否允许上传，以及`submitForm`处理表单提交并附带文件。

methods: {
  handleChange(file) {
    this.fileList.push(file);
  },
  beforeUpload(file) {
    // 这里可以根据需求进行文件大小、类型限制
    if (file.size > 1024 * 1024 * 5) { // 5MB限制
      message.error('文件过大，请上传小于5MB的文件');
      return false;
    }
    return true;
  },
  handleSubmitForm() {
    const formData = new FormData();
    for (let i = 0; i < this.fileList.length; i++) {
      formData.append('files', this.fileList[i]);
    }
    // 将文件添加到formData中，然后一并发送请求
    this.$axios.post(this.uploadUrl, formData).then(response => {
      console.log('上传成功', response);
    }).catch(error => {
      console.error('上传失败', error);
    });
  },
},

4. 在表单提交时，你可以选择在`submitForm`方法中直接调用`handleSubmitForm`，或者结合条件判断表单是否完整再决定是否提交。

记得替换`your-api-url`为实际的HTTP请求URL。这样，当用户点击上传按钮时，表单和文件都会被一起发送到服务器。