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

要在 Element UI 表单中上传文件和其他信息，可以使用 `el-upload` 组件。以下是一个示例：

<template>
  <el-form ref="form" :model="form">
    <!-- 其他表单项 -->
    <el-form-item label="上传文件">
      <el-upload
        class="upload-demo"
        action="/upload"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        :file-list="fileList"
        multiple
        drag
        :show-file-list="false"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">支持多文件上传，上传文件大小不能超过 2 MB</div>
      </el-upload>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        // 其他表单项的值
      },
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      // 限制文件大小
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!')
        return false
      }
    },
    handleSuccess(response, file, fileList) {
      // 上传成功的回调函数
      // 可以在这里将上传成功的文件信息保存到表单中
      console.log(response, file, fileList)
    }
  }
}
</script>

在这个示例中，我们使用了 `el-upload` 组件来实现文件上传。我们将这个组件放在一个 `el-form-item` 中，以便它与其他表单项一起提交。我们使用 `before-upload` 方法来限制文件大小，使用 `handleSuccess` 方法来处理上传成功后的回调。

当用户选择文件后，文件会出现在文件列表中。可以通过 `:show-file-list="false"` 来隐藏文件列表，仅显示上传按钮和提示信息。可以通过 `multiple` 属性来支持多文件上传，使用 `drag` 属性来支持拖拽上传。