uView框架表单提交：头像上传、姓名、年龄、性别、兴趣爱好下拉框

<template>
  <div class="form-container">
    <h2>提交表单</h2>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="avatar">头像</label>
        <input type="file" id="avatar" ref="avatar" accept="image/*" @change="handleAvatarChange">
      </div>
      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" id="name" v-model.trim="form.name" placeholder="请输入姓名">
        <span class="error-message" v-if="form.name === ''">姓名不能为空</span>
      </div>
      <div class="form-group">
        <label for="age">年龄</label>
        <input type="number" id="age" v-model.number="form.age" placeholder="请输入年龄">
        <span class="error-message" v-if="!form.age">年龄不能为空</span>
      </div>
      <div class="form-group">
        <label for="gender">性别</label>
        <select id="gender" v-model="form.gender">
          <option value="">请选择</option>
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
        <span class="error-message" v-if="form.gender === ''">性别不能为空</span>
      </div>
      <div class="form-group">
        <label for="hobbies">兴趣爱好</label>
        <select id="hobbies" v-model="form.hobbies" multiple>
          <option value="reading">阅读</option>
          <option value="music">音乐</option>
          <option value="sports">运动</option>
          <option value="travel">旅游</option>
        </select>
        <span class="error-message" v-if="form.hobbies.length === 0">兴趣爱好不能为空</span>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          avatar: null,
          name: '',
          age: null,
          gender: '',
          hobbies: []
        }
      };
    },
    methods: {
      handleAvatarChange(event) {
        this.form.avatar = event.target.files[0];
      },
      submitForm() {
        if (!this.validateForm()) {
          return;
        }
        // TODO: 提交表单
      },
      validateForm() {
        let isValid = true;
        if (this.form.name === '') {
          isValid = false;
          this.$refs.name.focus();
        } else if (!this.form.age) {
          isValid = false;
          this.$refs.age.focus();
        } else if (this.form.gender === '') {
          isValid = false;
          this.$refs.gender.focus();
        } else if (this.form.hobbies.length === 0) {
          isValid = false;
          this.$refs.hobbies.focus();
        }
        return isValid;
      }
    }
  };
</script>
<style>
  .form-container {
    width: 400px;
    margin: 0 auto;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  label {
    display: block;
    margin-bottom: 0.5rem;
  }

  input[type="file"] {
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }

  select[multiple] {
    height: 6rem;
  }

  .error-message {
    color: red;
    font-size: 0.8rem;
  }
</style>
<pre><code></code></pre>