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. Shell中比较判断

    一.shell判断数组中是否包含某个元素:ary=(1 2 3)a=2if [[ "${ary[@]}" =~ "$a" ]] ; then    echo & ...

  2. web开发: css高级与盒模型

    一.组合选择器 二.复制选择器优先级 三.伪类选择器 四.盒模型 五.盒模型显示区域 六.盒模型布局 一.组合选择器 <!DOCTYPE html> <html> <he ...

  3. ftp服务器终端登录后乱码处理方法

    首先在windows上用资源管理器登录看看会不会乱码,如果不会,说明是GBK编码 因为windows默认是GBK(936),linux默认(UTF-8) 因为FTP服务器我们修改不了,如果用linux ...

  4. 关于join() 是否会释放锁的一些思考

    # 首先从一个很有意思的问题开始: - 问 : Thread 的join() 方法是否会释放锁? - 答: 会! # 如果一切到这里就结束了,那可能也就没有这篇小记了,但是我的脑子却冒出了一些奇怪的想 ...

  5. java学习笔记12-继承

    继承就是子类继承父类的特征和行为 有时候单一划分某个类别并不能处理所有情况,某些类别下有明显不同的子类,这些子类虽然拥有类似的行为和属性,但是他们各自发生的这些行为的方式或者属性对某些结果的影响是不一 ...

  6. 用union 和 struct 位域操作

    很久没有用C 语言中的 union 和 struct 位域操作了. 最近用了一下(当然,我承认是从stackoverflow 上抄的) 需求是这样的,已知一个 LPARAM 整数 3866625 ,求 ...

  7. java递归方法查找某目录下包含有某字符串的文件

    最近在安装mysql5.6的时候,因为是免安装版的所以有些配置项需要手动配置.但是配置某一项的时候(例如:max_allowed_packet=xxxxx),不知道max_allowed_packet ...

  8. 嵌入式系统FreeRTOS — 互斥信号量

    互斥信号量可以在资源保护的时候很有帮助.用于控制在两个或多个任务间访问共享资源.任务1里面用互斥,那么任务2只能等任务1访问完再访问同一个变量. 比如全局变量double gADC_value[CH_ ...

  9. Maven 配置问题 - could not find resource mybatis-config.xml

    需要在pom中加入以下代码 <build> <resources> <resource> <directory>src/main/resources&l ...

  10. svn 跟 git的区别

    1.svn是集中式版本控制系统,git是分布式版本控制系统 2.svn是直接与服务器进行交互,git是将文件存到本地然后再推送到服务器 3.svn必须在连网的情况下工作,git可以不连网开发 4.sv ...