elementuiform表单上传文件以及其他信息

要在ElementUI表单中上传文件和其他信息，您可以使用`el-upload`组件。这个组件可以让您上传文件并同时提交其他表单数据。以下是一个示例代码：

<template>
  <el-form ref="form" :model="formData" label-width="120px">
    <el-form-item label="文件">
      <el-upload
        class="upload-demo"
        :action="uploadUrl"
        :on-success="handleUploadSuccess"
        :before-upload="beforeUpload"
        :auto-upload="false"
        :file-list="fileList"
      >
        <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
        <el-button
          slot="tip"
          type="text"
          style="color: #808695;font-size: 12px;"
        >
          支持扩展名：.doc .docx .pdf .jpg .png 等格式的文件
        </el-button>
      </el-upload>
    </el-form-item>
    <el-form-item label="其他信息">
      <el-input v-model="formData.otherInfo"></el-input>
    </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 {
      formData: {
        otherInfo: "",
      },
      fileList: [],
      uploadUrl: "your upload url",
    };
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
    },
    beforeUpload(file) {
      this.fileList.push(file);
      return false;
    },
    submitForm() {
      // 提交表单数据
      this.$refs.form.validate((valid) => {
        if (valid) {
          const formData = new FormData();
          formData.append("file", this.fileList[0]);
          formData.append("otherInfo", this.formData.otherInfo);
          // 发送请求
          // axios.post(this.uploadUrl, formData).then((res) => {});
        }
      });
    },
  },
};
</script>

这个示例中，我们使用了`el-upload`组件来上传文件。我们定义了`uploadUrl`属性来指定上传文件的URL，`fileList`属性用于存储上传的文件列表。在`before-upload`事件中，我们将上传的文件添加到`fileList`中，但是不会自动上传。在`handleUploadSuccess`事件中，我们可以获取到上传成功后的响应数据、上传的文件和当前的文件列表。在`submitForm`方法中，我们将文件和其他表单数据组成一个`FormData`对象，并发送POST请求到指定的URL。