elementui的el-form和el-upload上传文件和表单数据

在使用 Element UI 的 el-form 和 el-upload 组件同时上传文件和提交表单数据时，你可以将 el-upload 组件放置在 el-form-item 内部，并通过监听 el-upload 的 on-success 事件来确认文件上传成功后，再手动触发表单的提交。

以下是一个简单的例子：

<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
        action="http://example.com/upload"
        :on-success="handleSuccess"
        :before-upload="beforeUpload">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        name: '',
      },
    };
  },
  methods: {
    beforeUpload(file) {
      // 可以在这里添加上传文件之前的逻辑
    },
    handleSuccess(response, file, fileList) {
      // 文件上传成功后的回调，可以在这里手动触发表单提交
      this.submitForm();
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过后的逻辑，例如发起请求提交表单数据
          this.$http.post('http://example.com/submit', this.form)
            .then(response => {
              // 处理响应数据
            })
            .catch(error => {
              // 处理错误
            });
        } else {
          // 表单验证不通过的逻辑
          console.log('表单验证不通过');
        }
      });
    },
  },
};
</script>

在这个例子中，el-upload 组件用于文件上传，你需要指定一个上传的 action 地址。beforeUpload 方法可以用来在文件上传前进行一些验证或者处理。handleSuccess 方法会在文件上传成功后被调用，在这里你可以手动触发表单的提交。submitForm 方法中使用了 this.$refs.form.validate 来进行表单验证，如果验证通过，会进一步发起一个 HTTP 请求来提交表单数据。