ElementUI Form:Upload 上传

ElementUI安装与使用指南

Upload 上传

点击下载learnelementuispringboot项目源码

效果图


el-upload.vue(Upload上传)页面效果图



el-upload.vue代码

bash 复制代码
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import ElementUI from "@/views/ElementUI.vue";
import PagePath from "@/components/PagePath.vue";
import ElButton from "@/views/el-button.vue";
import ElLink from "@/views/el-link.vue";
import ElRadio from "@/views/el-radio.vue";
import ElRow_elCol from "@/views/el-row_el-col.vue";
import ElContainer from "@/views/el-container.vue";
import ElContainerExample from "@/views/el-container-example.vue";
import ElCheckbox from "@/views/el-checkbox.vue";
import ElInput from "@/views/el-input.vue";
import ElInputNumber from "@/views/el-input-number.vue";
import ElSwitch from "@/views/el-switch.vue";
import ElUpload from "@/views/el-upload.vue";

Vue.use(VueRouter)

const routes = [
  {
    path: PagePath.el_upload,
    name: 'el-upload',
    component: ElUpload
  },
  {
    path: PagePath.el_switch,
    name: 'el-switch',
    component: ElSwitch
  },
  {
    path: PagePath.el_input_number,
    name: 'el-input-number',
    component: ElInputNumber
  },
  {
    path: PagePath.el_input,
    name: 'el-input',
    component: ElInput
  },
  {
    path: PagePath.el_checkbox,
    name: 'el-checkbox',
    component: ElCheckbox
  },
  {
    path: PagePath.el_container_example,
    name: 'el-container-example',
    component: ElContainerExample
  },
  {
    path: PagePath.el_container,
    name: 'el-container',
    component: ElContainer
  },
  {
    path: PagePath.el_row_el_col,
    name: 'el-row_el-col',
    component: ElRow_elCol
  },
  {
    path: PagePath.el_radio,
    name: 'el-link',
    component: ElRadio
  },
  {
    path: PagePath.el_link,
    name: 'el-link',
    component: ElLink
  },
  {
    // path: '/el_button',
    // path: PagePath.data().el_button,
    path: PagePath.el_button,
    name: 'el-button',
    component: ElButton
  },
  {
    path: '/element_ui',
    name: 'element-ui',
    component: ElementUI
  },
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Attribute



Slot

Methods

相关推荐
Up九五小庞10 分钟前
开源埋点分析平台 ClkLog 本地部署 + Web JS 埋点测试实战--九五小庞
前端·javascript·开源
摘星编程33 分钟前
React Native + OpenHarmony:UniversalLink通用链接
javascript·react native·react.js
qq_177767371 小时前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头88211 小时前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数,用于处理用户交互和状态更新,通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
程序员清洒3 小时前
Flutter for OpenHarmony:Text — 文本显示与样式控制
开发语言·javascript·flutter
雨季6663 小时前
Flutter 三端应用实战:OpenHarmony 简易“动态内边距调节器”交互模式深度解析
javascript·flutter·ui·交互·dart
天人合一peng3 小时前
Unity中button 和toggle监听事件函数有无参数
前端·unity·游戏引擎
会飞的战斗鸡4 小时前
JS中的链表(含leetcode例题)
javascript·leetcode·链表
方也_arkling4 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐4 小时前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例,包含答辩的问题和答案
前端