elementui 上传图片和 from 表单提交方式

elementUI提供了丰富的组件和指令来实现表单和图片上传的功能。首先，你需要使用form表单来包裹输入框和上传按钮。然后，使用el-form-item来包裹具体的输入框和el-upload来实现图片上传功能。在提交表单时，你可以使用elementUI提供的el-form组件来处理表单的提交方式。

代码示例：

<template>
  <el-form :model="form" ref="form" label-width="100px">
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model.number="form.age"></el-input>
    </el-form-item>
    <el-form-item label="头像">
      <el-upload :action="uploadUrl" :before-upload="beforeUpload" :on-success="uploadSuccess">
        <el-button>点击上传</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: '',
        age: '',
        avatar: ''
      },
      uploadUrl: '/file/upload'
    }
  },
  methods: {
    beforeUpload(file) {
      // 在上传之前对图片进行校验或处理
    },
    uploadSuccess(response) {
      // 图片上传成功后的回调函数，可以对返回的图片地址进行处理
      this.form.avatar = response.data.url;
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过后的处理逻辑，可以将表单数据提交到后台
          console.log(this.form);
        }
      });
    }
  }
}
</script>