element-ui 表单中上传文件的规则
==================
在 Element UI 中，表单中的文件上传控件是 `el-upload`。这个组件提供了一种方便的方式来上传文件，同时也提供了一些规则和特性来处理上传的文件。
基本用法
----
首先，你需要导入 `el-upload` 组件并注册在你的 Vue 实例中。然后，你可以在表单中使用 `el-upload` 标签来添加一个文件上传控件。
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button slot="trigger" size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
```
在上面的例子中，`action` 属性是文件上传的 URL，`before-upload` 属性是一个函数，它会在文件上传前被调用，可以用来限制上传文件的类型和大小等。`on-success` 属性是一个函数，它会在文件上传成功后被调用。
规则设定
----
`el-upload` 提供了一些属性和方法来设定上传文件的规则。例如，你可以使用 `accept` 属性来限制上传文件的类型，使用 `max-size` 属性来限制上传文件的大小。
下面是一个例子：
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:accept="['image/png', 'image/jpeg']"
html中提交表单用什么属性
:max-size="5000000">
<el-button slot="trigger" size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
```
在这个例子中，只有 PNG 和 JPEG 格式的文件可以被上传，而且文件大小不能超过 5MB。如果用户试图上传不符合规则的文件，`before-upload` 方法会被调用，并且该方法应该返回一个错误信息。如果返回 `false`，则上传会停止。
处理上传文件的其他方式
-
--------
除了使用 `before-upload` 方法来设定上传文件的规则，你还可以使用 `on-error` 方法来处理上传错误。这个方法会被调用当上传失败时。它接受一个参数，这个参数是一个对象，包含 `response`（服务器的响应）和 `file`（上传的文件）等信息。
下面是一个例子：
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:
before-upload="beforeUpload"
:accept="['image/png', 'image/jpeg']"
:max-size="5000000"
:on-error="handleError">
<el-button slot="trigger" size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
```

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。