在 Vue 2 中,我们通常使用 Element UI 的 el-upload
组件来实现文件上传功能。然而,在 Vue 3 中,由于 Element UI 没有官方支持 Vue 3 的版本,我们通常会使用 Element Plus(Element UI 的 Vue 3 版本)的 el-upload
组件,尽管两者的使用方式大致相同,但也有一些差异。
Vue 2 + Element UI
el-upload 组件
属性 (Attributes):
action
: 必需的 URL,上传的地址headers
: 设置上传的请求头部on-success
: 文件上传成功时的钩子on-error
: 文件上传失败时的钩子before-upload
: 上传文件之前的钩子,参数为上传的文件,若返回false
或者返回Promise
且被 reject,则停止上传auto-upload
: 是否在选取文件后立即进行上传multiple
: 是否支持多文件上传limit
: 允许上传文件的个数限制on-exceed
: 文件超出个数限制时的钩子file-list
: 已经上传的文件列表,默认根据v-model
生成drag
: 是否启用拖拽上传...
: 其他通用属性
事件 (Events):
change
: 文件状态改变时的钩子,更新文件列表success
: 文件上传成功时的回调error
: 文件上传失败时的回调progress
: 文件上传时的进度事件remove
: 文件列表移除文件时的回调...
: 其他通用事件
方法 (Methods):
- Element UI 的
el-upload
组件通常不提供直接调用的方法,而是通过属性和事件来控制其行为。
示例:
选取文件
上传到服务器
只能上传jpg/png文件,且不超过500kb
Vue 3 + Element Plus
在 Vue 3 中使用 Element Plus 的 el-upload
组件与 Vue 2 + Element UI 非常相似,但请注意 API 可能会有一些变化或新增功能。你应该查阅 Element Plus 的官方文档以获取最新的信息。
示例:
在 Vue 3 中使用 Element Plus 的 el-upload
组件的示例代码与 Vue 2 类似,但你需要使用 Composition API 来定义响应式的数据和方法。
<