【区分vue2和vue3下的element UI ¶Upload 上传组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 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 组件通常不提供直接调用的方法,而是通过属性和事件来控制其行为。

示例:

vue 复制代码
<template>
  <el-upload
    class="upload-demo"
    action="https://example.com/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :auto-upload="false"
    :multiple="true"
    :limit="3"
    :on-exceed="handleExceed"
    :file-list="fileList"
    :drag="true">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
      // 处理上传成功的逻辑
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 0.5;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 0.5MB!');
        return false;
      }
      return true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
    },
    submitUpload() {
      this.$refs.upload.submit(); // 使用 $refs 调用组件的 submit 方法
    },
  },
};
</script>

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 来定义响应式的数据和方法。

vue 复制代码
<template>
  <!-- 模板部分与 Vue 2 示例类似 -->
</template>

<
相关推荐
月明长歌17 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光18 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
跟着珅聪学java1 天前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
....4921 天前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
喜陈2 天前
解决elementui-plus使用el-table的合计功能时横向滚动条显示在了合计上方
前端·vue.js·elementui
北极糊的狐3 天前
若依项目通用套路——列表页面提前加载数据塞进下拉框待选项
javascript·vue.js·elementui
lyj1689974 天前
el-select+el-tree实现下拉树形选择
javascript·vue.js·elementui
招风的黑耳5 天前
ElementUI元件库——提升Axure原型设计效率与质量
前端·elementui·axure
油丶酸萝卜别吃6 天前
springBoot与ElementUI配合上传文件
spring boot·后端·elementui
Jiaberrr6 天前
介绍几种创意登录页(含完整源码)
前端·javascript·css·elementui·css3