1. <el-upload
  2. v-else
  3. class='ensure ensureButt'
  4. :action="importFileUrl"
  5. :data="upLoadData"
  6. name="importfile"
  7. :onError="uploadError"
  8. :onSuccess="uploadSuccess"
  9. :beforeUpload="beforeAvatarUpload"
  10. >
  11. <el-button size="small" type="primary">确定</el-button>

其中importFileUrl是后台接口,upLoadData是上传文件时要上传的额外参数,uploadError是上传文件失败时的回掉函数,uploadSuccess是文件上传成功时的回掉函数,beforeAvatarUpload是在上传文件之前调用的函数,我们可以在这里进行文件类型的判断。

  1. data () {
  2. importFileUrl: 'http:dtc.com/cpy/add',
  3. upLoadData: {
  4. cpyId: '123456',
  5. occurTime: '2017-08'
  6. }
  7. },
  8. methods: {
  9. // 上传成功后的回调
  10. uploadSuccess (response, file, fileList) {
  11. console.log('上传文件', response)
  12. },
  13. // 上传错误
  14. uploadError (response, file, fileList) {
  15. console.log('上传失败,请重试!')
  16. },
  17. // 上传前对文件的大小的判断
  18. beforeAvatarUpload (file) {
  19. const extension = file.name.split('.')[1] === 'xls'
  20. const extension2 = file.name.split('.')[1] === 'xlsx'
  21. const extension3 = file.name.split('.')[1] === 'doc'
  22. const extension4 = file.name.split('.')[1] === 'docx'
  23. const isLt2M = file.size / 1024 / 1024 < 10
  24. if (!extension && !extension2 && !extension3 && !extension4) {
  25. console.log('上传模板只能是 xls、xlsx、doc、docx 格式!')
  26. }
  27. if (!isLt2M) {
  28. console.log('上传模板大小不能超过 10MB!')
  29. }
  30. return extension || extension2 || extension3 || extension4 && isLt2M
  31. }
  32. }

在vue项目中使用element-ui的Upload上传组件的更多相关文章

  1. 页面中使用多个element-ui upload上传组件时绑定对应元素

    elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢? ...

  2. 在Vue项目中使用Element UI:按需引入和完整引入

    下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...

  3. vue项目中使用element ui上传图片到七牛

    1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...

  4. 封装Vue Element的upload上传组件

    本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...

  5. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  6. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  7. element ui实现手动上传文件,且只能上传单个文件,并能覆盖上传。

    element ui提供了成熟的组件场景,但实际工作中难免会遇到认(sha)真(diao)的产品.比如,最近遇到的,要求实现手动上传特定格式文件(用户点击“上传文件”按钮,确定之后,只是单纯选择了文件 ...

  8. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  9. 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

    前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...

  10. vue开发中vue-resource + canvas 图片压缩、上传、预览

    1.使用vue-resource上传,也可以自定义ajax上传: 2.使用<input type="file" @change="submit()" na ...

随机推荐

  1. PHP 求两个日期之间相差的天数、月数

    <?php /** * 求两个日期之间相差的天数 * (针对1970年1月1日之后,求之前可以采用泰勒公式) * @param string $day1 * @param string $day ...

  2. 第五章、前端之JQuery

    目录 第五章.前端之JQuery 一.选择器 二.基本筛选器 三.样式操作 四.位置操作 五.文本操作 六.属性操作 七.文档处理 八.事件 九.动画效果 十.补充 第五章.前端之JQuery 一.选 ...

  3. DA_03_linux网络配置及其远程连接

    一: 修改Linux的基本配置 直接运行:setup,根据提示修改 1.修改主机名:vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=shizhan1 ...

  4. CodeForcs 1169B Good Triple

    CodeForcs 1169B Good Triple 题目链接:http://codeforces.com/problemset/problem/1169/B 题目描述:给你m对不超过n的数字,找出 ...

  5. 关于SendMessage和PostMessage的理解的例子

    对于SendMessage 和 PostMessage 平时口头的解释是 SendMessage 发送消息后等待返回, PostMessage 发送消息后立即返回 . 但是这样解释还是不具体,什么叫等 ...

  6. 获取节点 document.getElementBy{Id,Name,TagName,ClassName

    document.getElementById(" "); document.getElementByName(" "); document.getElemen ...

  7. 脚本实现PXE装机

    #!/bin/bash read -p "请输入您的装机服务器:" ip read -p "请输入您想要的ip最小值(1-255):" min read -p ...

  8. Java SE练习 - 对dom4j解析、反射的综合练习

    原 Java SE练习 - 对dom4j解析.反射的综合练习 2017年12月13日 14:41:07 都说名字长不会被发现 阅读数 138 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa ...

  9. Luogu P4168 [Violet]蒲公英 分块

    这道题算是好好写了.写了三种方法. 有一个好像是$qwq$$N\sqrt(N)$的方法,,但是恳请大佬们帮我看看为什么这么慢$qwq$(后面的第三种) 注:$pos[i]$表示$i$属于第$pos[i ...

  10. 洛谷 P1355 神秘大三角(计算几何基础)

    P1355 神秘大三角 题目提供者yeszy 标签 福建省历届夏令营 难度 普及/提高- 题目描述 判断一个点与已知三角形的位置关系. 输入输出格式 输入格式: 前三行:每行一个坐标,表示该三角形的三 ...