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

如果你使用的是 ElementUI，那么你可以使用 `el-upload` 组件来手动上传文件。这个组件包含一个默认的上传按钮，但是你也可以通过设置 `show-file-list` 属性为 `false` 来隐藏它。以下是一个简单的例子：

<template>
  <el-upload
    ref="upload"
    action="/your/upload/url"
    :show-file-list="false"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button size="small" type="primary">上传文件</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 文件上传成功的回调函数
      console.log(response);
    },
    handleError(err, file, fileList) {
      // 文件上传失败的回调函数
      console.log(err);
    },
    uploadFile() {
      // 手动触发上传
      this.$refs.upload.submit();
    }
  }
}
</script>

上面的代码中，我们设置了 `ref="upload"`，这样我们就可以通过 `this.$refs.upload` 来访问 `el-upload` 组件。然后我们设置了 `action` 属性为你的上传接口的 URL，同时设置了 `show-file-list` 属性为 `false`，这样就隐藏了默认的上传按钮和文件列表。接着，我们分别设置了 `on-success` 和 `on-error` 属性来处理文件上传成功和失败的回调函数。最后，我们在 `el-button` 组件上绑定了 `click` 事件，这样当用户点击按钮时就会手动触发上传。

除了上传文件之外，你也可以在 `el-upload` 组件中添加其他的表单元素。以下是一个例子：

<template>
  <el-upload
    ref="upload"
    action="/your/upload/url"
    :show-file-list="false"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-input v-model="name" placeholder="文件名称"></el-input>
    <el-input v-model="description" placeholder="文件描述"></el-input>
    <el-button size="small" type="primary">上传文件</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      description: ''
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 文件上传成功的回调函数
      console.log(response);
    },
    handleError(err, file, fileList) {
      // 文件上传失败的回调函数
      console.log(err);
    },
    uploadFile() {
      // 手动触发上传
      this.$refs.upload.submit();
    }
  }
}
</script>

上面的代码中，我们在 `el-upload` 组件中添加了两个 `el-input` 组件，分别是文件名称和文件描述。这些表单元素的值可以通过 `v-model` 双向绑定到组件的 `data` 属性中，这样就可以在上传文件时一起提交到服务器端。