vue 怎么实现上传文件且是必传 用el-input组件

在 Vue 中实现上传文件且为必传的功能，可以使用 `el-input` 组件配合 `v-model` 指令以及表单验证来实现。下面是一个简单的示例代码：

1. 首先，在 Vue 组件中引入 `el-input` 组件：

<template>
  <div>
    <el-input v-model="file" type="file" @change="handleFileUpload" required></el-input>
    <el-button type="primary">上传文件</el-button>
  </div>
</template>

2. 在 Vue 组件的 `data` 属性中定义一个变量 `file`，用于存储上传的文件对象：

data() {
  return {
    file: null, // 存储上传的文件对象
  };
},

3. 在 Vue 组件的 `methods` 中定义一个 `handleFileUpload` 方法，用于处理文件上传逻辑：

methods: {
  handleFileUpload(event) {
    // 将文件对象赋值给 file 变量
    this.file = event.target.files[0];
  },
},

4. 在表单验证中使用 `required` 属性，确保用户必须选择文件才能提交表单：

<template>
  <el-form :model="form" :rules="{ required: { message: '请选择文件', trigger: 'blur' } }">
    <!-- 表单字段 -->
  </el-form>
</template>

上述代码中，我们使用了 `v-model` 指令将 `file` 变量绑定到 `el-input` 组件的 `v-model` 上，从而实现了文件对象的双向绑定。当用户选择文件后，文件对象将自动存储在 `file` 变量中。同时，我们在表单验证中使用了 `required` 属性确保用户必须选择文件才能提交表单。当用户没有选择文件时，表单将显示错误提示信息。

注意：上述代码中的 `form` 变量用于存储表单数据，您可以在组件中根据需要自定义。另外，如果您需要在文件上传后执行其他操作，可以在 `handleFileUpload` 方法中进行相应处理。