从菜鸟到高手：彻底掌握 ElementUI 表单上传文件验证技巧

2022-11-01 02:53:43

ElementUI 表单文件上传验证：从入门到精通

ElementUI 是一个备受推崇的前端 UI 框架，它的组件库异常丰富，可以助力你迅速搭建既美观又实用的网页界面。ElementUI 的表单组件更是一大亮点，除了支持各式各样的输入验证，它还囊括了文件上传功能。在这篇博文中，我们将深入浅出地探究如何使用 ElementUI 实现表单文件上传验证功能。

准备就绪

在开始之前，我们先来安装 ElementUI 和 Vue.js。如果你尚未安装，请遵循官方文档进行安装。

创建 Vue 项目

新建一个 Vue 项目，并安装 ElementUI：

vue create my-project
cd my-project
npm install element-ui

在 Vue 项目中启用 ElementUI

在 main.js 文件中，引入 ElementUI 和 Vue.js：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

构建表单组件

在 src 目录下新建一个 Form.vue 文件，并输入以下代码：

<template>
  <div>
    <el-form :model="form" ref="form" label-width="120px">
      <el-form-item label="文件上传" prop="file">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          :headers="headers"
          :multiple="true"
          :on-success="handleSuccess"
          :on-error="handleError"
        >
          <el-button slot="default" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { ElForm, ElFormItem, ElUpload } from 'element-ui'

export default defineComponent({
  components: { ElForm, ElFormItem, ElUpload },
  data() {
    return {
      form: {
        file: '',
      },
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    }
  },
  methods: {
    handleSuccess(response) {
      console.log(response)
    },
    handleError(err) {
      console.error(err)
    },
  },
})
</script>

在 App.vue 中注册表单组件

在 App.vue 文件中，注册表单组件：

<template>
  <div id="app">
    <Form />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Form from './components/Form.vue'

export default defineComponent({
  components: { Form },
})
</script>

启动项目

启动项目：

npm run serve

现在，你就可以在浏览器中访问你的项目了。输入 http://localhost:8080，你将看到一个表单，其中包含一个文件上传控件。点击“点击上传”按钮来选择文件并上传。

添加文件上传验证

为了防止用户上传非法文件，我们可以对文件上传进行验证。在 Form.vue 文件中，修改 el-upload 组件的属性，添加文件类型和文件大小的验证：

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :headers="headers"
  :multiple="true"
  :on-success="handleSuccess"
  :on-error="handleError"
  :accept="accept"
  :size-limit="sizeLimit"
>